Tutorial jQuery – Drag & Drop

Inicio → Tutoriales → jQuery → Tutorial jQuery – Drag & Drop

En este tutorial vamos a utilizar las funciones de drag y drop de jQuery para crear un carrito de compras bastante dinamico, también vamos a aprovechar de utilizar el efecto de accordion para darle mejor aspecto visual.

Como siempre pueden visualizar el codigo fuente aqui o descargarlo aqui.

Por el 30 de septiembre, 2010   /   jQuery, Tutoriales   /   14 comentarios
  • Alex Maya

    Una pregunta .¿ cómo puedo hacer un script para que aparezca el precio final de lo que se va a comprar?

  • omar

    oye y si quiero subir archivos como le podria hacer por ejemplo arratrar doctos word o pdf

  • fra lopez

    Buenas que tal estoy intentando algo bien sencillo de drag and drop pero no termino de conseguirlo.

    En mi caso mi objeto draggeable es una div y mi dropable va a ser otra div lo que quiero conseguir es que al arrastrar una div a la otra, quede dentro de esta es decir lo equivalente a div1.appendChild(div2)
    He intentado hacerlo de la siguiente forma:
    …
    drop: function(event, ui) {

    $(this).droppable.appendChild( $(ui.draggable));

    }
    …
    pero no lo he coseguido mi pregunta es como obtengo el objeto de clase div que estoy arrastrando y el objeto clase div en el que suelto el anterior para poder trabajar con ellos (hacer el appendChild)
    Necesito obligatoriamente que uno sea hijo del otro por la funcionalidad de mi web.

    Gracias de antemano!

    • http://www.jvsoftware.com Javier Villanueva

      Hola, no es necesario que uses $ alrededor de ui.draggable ya que ya es un objeto de jQuery y $(this) en el contexto de la funcion droppable es el elemento a donde quieres “dropear” asi que en lugar de $(this).droppable seria simplemente $(this). Intenta este ejemplo hace exactamente lo que necesitas:

      http://jsfiddle.net/vengiss/dMkJw/

      Traten de usar sitios como jsfiddle o similares para mostrar ejemplos de su codigo, ayuda a visualizar mejor las cosas en lugar de copiar y pegar el codigo en el comentario.

  • JOSE MENDOZA

    Hola amigo tu tutorial es al 100 me sirvio mucho solo que si podrias poner una breve explicacion de como se valla eliminando de la lista lo que se escoja y si lo elimina de la lista del carrito vuelva a parecer estoy haciendo uno parecido solo que no es para carrito de compras y no encuentro la manera de poder hacer eso si me pudieras ayudar te lo agradeceria mucho

  • Invitado

    Exelente!!!!!

  • Pingback: Video tutorial: Guardar posicion de jQuery UI Sortable | JV Software

  • Patudo

    Hola, soy Alex, muy bueno el tutorial. Pero tengo un problem. Yo lo que quiero hacer es generar algo asi desde base de datos. Entonces estoy trabajando trayendolo con ajax y sql. Un arbol Xml, lo recorro construyendo desde el javascript un “ul” y posteriormente los “li”. Se forma bien a simple vista, pero luego no se puede arrastrar, no es draggable. Es como si no cogiera las propiedades para eso. Si alguien me puede ayudar, seria de mucha ayuda. Y gracias por el tutorial.

  • luis

    hola soy luis la verdad todos tus tutoriales me han sido de gran ayuda para iniciarme en el mudo de jquery son muy buenos y explicativos te felicito..¡ solo me gustaría saber como podría hacer para que los datos del acordeón fueran registros extraídos de una base de datos mysql, y luego los registros que se arrastren al carrito también poder insertarlos en otra tabla de la misma base de datos. seria como realizar un movimiento de esos registros hacia otra tabla de la base de datos..¡¡¡¡ Bueno amigo eso es todo espero que me puedas ayudar con esa inquietud… siempre estoy pendiente de tus nuevas publicaciones saludos….¡¡¡

    • javiervd

      Hola amigo, no es muy dificil tendrias que crear una funcion en con AJAX que se ejecute cada vez que un elemento sea arrastrado en el carrito y te conecte a la base de datos, creo que seria un buen tema para un proximo tutorial.

  • javiervd

    Hola xalito, para nada es muy facil, solo tendrias que mostrar los productos de la BD en los divs (puedes usar ezSQL) y el codigo de drag & drop seria exactamente el mismo.

    • raul

      Hola te felicito por los videos, te sigo en forma permanente. Te queria consultar si a cada elemento numerado al carrito que se agrega se puede agregar un input y todo esto, el div completo con sus items e imputs bajarlo a una tabla. Seria como arrastrar personas al div y sus imputs novedades para un sistema de asistencia laboral. Desde ya muchas gracias

      • javiervd

        Hola amigo, pues si solo tienes que agregar los elementos que necesitas, no seria tan sencillo como este tutorial pero en general si se puede hacer.

  • xalito

    Excelente felicitaciones desde colombia, venia trabajando jquery a ojo cerrado sin entender mucho ahora se que puedo escribir codigo desde cero.

    Una unica pregunta algo conchuda (descarada o cínica ), complicado encadenar esto con la base de datos?

Últimos Tutoriales

Testimonios

JV Software did a fantastic job converting a static site to WordPress. Best contractor I've worked with.
- Regan Wilders, United States
JV Software was very professional during all parts of our project and very quick with responses.
- Rob W., Canada