SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict SLEE's Avatar
    Join Date
    Aug 2003
    Location
    uk
    Posts
    258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    drag and drop options

    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. #2
    SitePoint Enthusiast
    Join Date
    Jan 2013
    Posts
    27
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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. #4
    SitePoint Addict SLEE's Avatar
    Join Date
    Aug 2003
    Location
    uk
    Posts
    258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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 stop event as outline in my previous post.

    Sounds like an interesting project. Good luck.

  6. #6
    SitePoint Addict SLEE's Avatar
    Join Date
    Aug 2003
    Location
    uk
    Posts
    258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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 stop event as outline in my previous post.

    Sounds like an interesting project. Good luck.
    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. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by SLEE View Post
    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.
    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. #8
    SitePoint Addict SLEE's Avatar
    Join Date
    Aug 2003
    Location
    uk
    Posts
    258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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.

    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •