Drag and drop options

JavaScript
1

using javascript i want to be able to drag options from one giant list to many other lists.

Here is the scenario: there is one box with say 20 options and the options can individually be dragged to 5 other lists. I wan the user to be able to drag them but also click them to delete them from the current list so it returns to the main list.
would something like sortable: https://jqueryui.com/sortable/#connect-lists do this or would i need to look at coding this myself?

I was also looking at Chosen: http://harvesthq.github.io/chosen/ with the multi select which is how i want it to look if i used this i would want to have each list remove any selected option from any other list is this possible?

Which would be the better approach?

2

check this also

3

Using jQuery UI’s Sortable Widget, you could implement your draggable list without too much bother.
You could then probably hook into one of the events it exposes, such as stop or update to add a class to any newly positioned elements.
You could then attach a click handler to any elements with this class, that when they are clicked, they return to the original list.

That would be my first approach at least.

4

Thanks for your replies,

@Pullo that sounds like a good approach could that be used with an input field do yo think or bet to stick with the lists? I assume id have to code it so i put the value of each into hidden field perhaps.

I found this: http://jsfiddle.net/codef0rmer/G6fmF/ which looks potentially good using the input field.

5

Yeah, there’s no reason that you couldn’t do it using an input field (as the fiddle shows), or even just a div.
In this case, it would be enough to just use jQuery UI’s draggable widget and hook into the [URL=“http://api.jqueryui.com/draggable/#event-stop”]stop event as outline in my previous post.

Sounds like an interesting project. Good luck.

6

Ive been looking into it more and i may go down the route of using autocomplete multi select items with tags instead.
I am thinking of have one source for the options and then as each select item is chosen it removes that option from the source.
autocomplete means they can search if they know what they are looking for and if they don’t then can use the drop down.
this also has the benefit of a fallback for no javascript although we would need to validate against duplicates server side.

7

Sounds interesting, but how will you account for multiple lists?
I understood that you wanted one master list from which users could remove items into various other lists.

Apart from that, search and a no JS fallback sound good.

8

I’ve been playing about with the jQuery autocomplete and also script like Chosen and you can supply a source to them.
At load i can give them all the same source which is an array and they as you select them you remove them from the list so no other select can choose that option.
Then i need to look at adding it back in if it is deselected but that should be straight forward.

Im not sure if i will use an input box or if i should go for the select box. i think the input is easier to code but the select box is better for no JS.