Tutorial jQuery - Drag & Drop Parte 2

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.

Si desean obtener o visualizar el código fuente:
http://www.jvsoftware.com/2010/09/30/tutorial-jquery-drag-drop/

Como siempre nos gustaria escuchar sus comentarios y sugerencias, no olviden suscribirse o seguirnos a traves de Twitter y Facebook para recibir actualizaciones automaticas de nuevos tutoriales.

Twitter: http://twitter.com/JVSoftware
Facebook: http://www.facebook.com/pages/Maracay-Venezuela/JV-Software/148654675145559

Category:

Science & Technology

Tags:

• tutorial
• jquery
• jquery ui
• accordion
• drag
• drop
• ajax
• draggable
• droppable
• español

[mcconvilleandrew]

What if I want an image in the list item instead of text.

What do I change text() to? How do I get the image to prepend:

ui.draggable.text()

[jvsoftware]

@mcconvilleandrew Hi, it shouldn't be a problem since ui.draggable lets you manipulate the currently dragged object no matter what it is, so for example if you had an img tag on the list you can get the source like this:

ui.draggable.find('img').attr(­­­'src') and use it to append the img.

Hopefully this isn't very confusing youtube doesn't let me post html tags in comments.

[mcconvilleandrew]

@jvsoftware Thanks, I did this:

$(this).prepend('[li]' + '[img src="' + ui.draggable.find('img').attr(­'src') + '" /]')

Does that look good? It works good but is it the right way?

[jvsoftware]

@mcconvilleandrew That's exactly what I did, It shouldn't be a problem using it like that, although I've been using the jQuery Templating Plugin (I talk about it on my latest vid) from a couple weeks now when I mix HTML and JS. I find it more flexible but just for that line of code it's not worth it IMO.

[EdgardoLuis]

pregunta como sabes tanto de las funciones especificas... ten es un manual completo de jquery??? me gustaria a prender jquery.... me gustara aplicarlo en u n sistema q toy haciendo para un  tesis

[jvsoftware]

@EdgardoLuis Bueno la mayoria me las he aprendido de memoria porque las he usado ya por mas de 2 años, pero si necesitas refrescar la memoria o aprender funciones nuevas la documentacion de jQuery oficial es execelente

[koutFloyd2130]

gracias se agradece un monton, he logrado realizar un proyecto bastante optimo gracias a este tutorial

[xxMorGanAxx]

Muy buen tutorial muchas gracias...

[AbrahamSerey]

Gracias por estos tutoriales, no sabes cuando me han ayudado, seria posible hacer un tutorial, de esta mismo forma pero aplicando el insertar la lista a una base de datos por php?

Espero que puedas hacerlo seria muy interesante. saludos.

[soybogue]

Ante todo decirte que es un excelente material que me ha enseñado muxo. Estoy intentado hacer algo parecido, es decir, distribuir una lista inicial de elementos entre 2 "carros". Mi pregunta es como hago para evitar elementos repetidos, es decir, como los elimino de la lista inicial y como retifico si lo he movido al "carro" equivocado. Muxas gracias.

[edumaldonado1]

muy buenos tus vídeos, sigue así!! :)

[rapblack2]

Tiene un problema cuando se quitan todos lo elementos arrastrados no permite agregar nuevamente sin relogear el navegador a si no vale =( -....

[sabigual]

En extremo interesante, definitivamente, el mejor mateial en Español sobre JQUERY.

[anjovi4]

excelente tutorial, entendible 100%, muchas gracias...