jQuery sortable and droppable list

Question

So what i'm looking for is a way for me to use both sortable and droppable on the same element. Lets say i have a list of 5 elements, these are all sortable. What i'm trying to do is when one element is dropped ontop of another one, it will append to that element and go out of the list, example:

<ul>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ul>

Element has been dropped

<ul>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item 
        <ul>
              <li>List Item Dropped</li>
        </ul>
    </li>

</ul>

If you have a clue an answer or a guideline on how to do this would be very appreciated!

Answer 1

HTML:

<ul id="theUL">
    <li class="item">List Item</li>
    <li class="item">List Item</li>
    <li class="item">List Item</li>
    <li class="item">List Item</li>
    <li class="item">List Item</li>
</ul>

Here is the sortable code for your UL. You need to config the change event. Change event occurs when sort event happens, else, it means the drop event happens.

$("#theUL").sortable({
    revert: true,
    items: "li",
    change: function( event, ui ) {ui.helper.addClass("change");},
    beforeStop: function( event, ui ) {ui.helper.removeClass("change");}
});

In droppable code, check if change occurs, if not, then it means dropped.

$(".item" ).droppable({
    accept: function(el) {
        return el.hasClass('item');
    },
    drop: function (event, ui) {
        item=ui.draggable;
        if(!item.hasClass('change')){
            //dropped!
        }
    }

});

Answer 2

Consider that you can do this without using Droppable. It can be done with connectWith . It just needs the addition of a second List already there.

 $(function() { $(".sort").sortable({ connectWith: ".sort", handle: "span.ui-icon", placeholder: "ui-state-highlight" }); $("#sortable").disableSelection(); });

 .top, .child { list-style-type: none; margin: 0; padding: 0; width: 60%; } .child { padding-bottom: 0.5em; } .top li { margin: 0 3px 3px 3px; padding: 0.4em; } .top li span { margin: 3px; cursor: grab; }

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <ul class="sort top"> <li class="item ui-state-default"><span class="ui-icon ui-icon-grip-dotted-vertical"></span>Item 1 <ul class="sort child"> <li class="item ui-state-default"><span class="ui-icon ui-icon-grip-dotted-vertical"></span>Item 1.1</li> </ul> </li> <li class="item ui-state-default"><span class="ui-icon ui-icon-grip-dotted-vertical"></span>Item 2 <ul class="sort child"></ul> </li> <li class="item ui-state-default"><span class="ui-icon ui-icon-grip-dotted-vertical"></span>Item 3 <ul class="sort child"></ul> </li> <li class="item ui-state-default"><span class="ui-icon ui-icon-grip-dotted-vertical"></span>Item 4 <ul class="sort child"></ul> </li> <li class="item ui-state-default"><span class="ui-icon ui-icon-grip-dotted-vertical"></span>Item 5 <ul class="sort child"></ul> </li> <li class="item ui-state-default"><span class="ui-icon ui-icon-grip-dotted-vertical"></span>Item 6 <ul class="sort child"></ul> </li> <li class="item ui-state-default"><span class="ui-icon ui-icon-grip-dotted-vertical"></span>Item 7 <ul class="sort child"></ul> </li> </ul>

If you want, you can make a function that appends all of these for you in initialization.

$(function() {
  function makeChildLists(target, class){
    $("li", target).each(function(i, el){
      $("<ul>", {
        class: "child " + class
      }).appendTo(el)
    });
  }

  makeChildLists($(".top"), "sort");
  
  $(".sort").sortable({
    connectWith: ".sort",
    handle: "span.ui-icon",
    placeholder: "ui-state-highlight"
  });
  $("#sortable").disableSelection();
});