Drag and drop elements from list into separate blocks

jquery drag-and-drop
titel picture titel · Sep 21, 2009 · Viewed 293.6k times · Source

I'm trying to get a jQuery component similar to the one on this site.

Basically, there is a list with available elements that you can drag and drop into several blocks.

I have quite a bit of JavaScript development experience, but I'm quite new to jQuery, the language I want this to be scripted in.

Can you please lead me to some example similar to the one showed above, or give me some hints on what would be a good place to start looking for something like this?

Answer

Thorbjørn Hermansen picture Thorbjørn Hermansen · Sep 21, 2009

Maybe jQuery UI does what you are looking for. Its composed out of many handy helper functions like making objects draggable, droppable, resizable, sortable etc.

Take a look at sortable with connected lists.

Related questions

Is there a good jQuery Drag-and-drop file upload plugin?

Is there a nice tidy jQuery plugin that allows including a single JS script then using a simple snippet to enable a form? Something like this: $j('#MyForm').enableDragDropUploads('.upload-area') With the upload target being the action of …

Read More
How do I get the coordinate position after using jQuery drag and drop?

How do I get the coordinate position after using jQuery drag and drop? I want to save the coordinate to a database, so that next time I visit, the item will be in that position. For example, x: 520px, y: 300…

Read More
When I make a draggable clone and drop it in a droppable I cannot drag it again

When I make a draggable clone and drop it in a droppable I cannot drag it again. How do I do that? Secondly I can only figure out how to us .append to add the clone to the droppable. But …

Read More