Drag items from a list to another empty list

tonyyeb · 4 May 2010 at 09:15

Hi all

I've seen an example of this somewhere on the web but can't find it again. I want a list of items that I can drag to another empty list. For example:

Then be able to commit the left list to a database. I'm pretty certain the example I saw was using jquery.

Thanks in advance

Tripnologist · 4 May 2010 at 11:17

Like this?
http://www.meadmiracle.com/dlb/DLBPlugin.aspx

I've used it once in the past and it did what I needed it to. You can get it from the link below.
http://www.meadmiracle.com/dlb/DLBDocumentation.aspx

m0rte · 4 May 2010 at 11:21

http://the-stickman.com/web-develop...ems-from-a-draggable-list-to-a-sortable-list/
Looks like this is what you're after although it doesn't remove the item from the original list once dragged. You might be able to add that in yourself?

tonyyeb · 4 May 2010 at 13:27

m0rte said:
http://the-stickman.com/web-develop...ems-from-a-draggable-list-to-a-sortable-list/
Looks like this is what you're after although it doesn't remove the item from the original list once dragged. You might be able to add that in yourself?

This is close but I would like to be able to remove them but also the place where they are dragged to needs to have defined sections (see A B C D in my example picture) and the user needs to be able to select C for example without needing to populate A and B first.

Thanks

Pho · 4 May 2010 at 13:47

jQuery UI Draggable seems to do it - this example uses two lists.

tonyyeb · 4 May 2010 at 13:49

@Pho

It is CLOSE but fundamentally not what I want. I want a list of PLACE HOLDERS where items can be dragged to. See my example in the first post.

tonyyeb · 4 May 2010 at 14:03

This more like what I am looking for:

http://www.gregphoto.net/sortable/advanced/

Pho · 4 May 2010 at 14:08

Ah ok.

Here's the example I was actually looking for: try this. You should be able to combine it with this.

If possible use jQuery UI as it's very good.

tonyyeb · 4 May 2010 at 14:10

Pho said:
hah I knew it was somewhere, try this.

This isn't what i'm after. See how when you move an item from one column to the other, the column makes room for it and the other items move. I want to be able to drop an item ON TOP of an area. For example:

You have a list of people.

You have a list of appointment times.

You want to drop a person ON TO an appointment time.

Get it? Im obviously not explaining this very well! lol

m0rte · 4 May 2010 at 14:21

http://stackoverflow.com/questions/...-drop-elements-from-list-into-separate-blocks
http://www.dhtmlgoodies.com/scripts/drag-drop-nodes/drag-drop-nodes-demo2.html

I think you'll need to combine the various links and examples in this thread to get what you want, theres unlikely to be a complete solution you can just copy directly.

GravyMonster · 4 May 2010 at 16:11

I don't think there will be something already written to do exactly what you want as it's quite specific. It would be quite simple to roll your own though. *ninja* As m0rte just said above - should read the thread better first */ninja*

I don't know how well you know jQuery, but all you need would be the UI draggable/droppable classes.

I created something similar a while back when I was messing about - check it out here

tonyyeb · 4 May 2010 at 16:20

With some tweaks this has worked perfectly.

tonyyeb said:
This more like what I am looking for:

http://www.gregphoto.net/sortable/advanced/

Thanks to everyone who suggested something.