Search code examples
jqueryjquery-uijquery-ui-draggablejquery-ui-sortablejquery-ui-droppable

jQuery UI: sortable and draggable + sortable and droppable


I have two lists. They are sortable but not connected (elements of list "one" cannot be mixed with elements of list "two")

I want elements of list "one" be droppable and elements of list "two" be draggable, because I want to drag and drop element of list "two" into list "one".

How should I do?

EDIT:

I tried to make the question as general as possible but maybe I should be more clear... sorry. Elements of list one are "categories" and they should be sortable. Elements of list two are "links" and should be sortable. A link belongs to only one category. I want to move a link from a categerory to another and I would love to use JQuery Ui.


Solution

  • If I understand your question correctly, you do not have to use draggable and droppable in conjunction with sortable in your case.

    Sortable connections are inherently one-way, so you only have to connect the second list to the first, and avoid connecting the first to the second:

    <ul id="first">
        <!-- ... -->
    </ul>
    
    <ul id="second">
        <!-- ... -->
    </ul>
    

    $("#first").sortable();
    $("#second").sortable({
        connectWith: "#first"
    });