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?
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.
@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.
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.
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.