Detect drop with jQuery sortable

Question

I'm playing with jQuery Sortable (http://johnny.github.io/jquery-sortable/) to display nested lists, move elements and then save the final results. The final goals is to manage a site structure/hierarchy by displaying categories and pages with drag & drop possibilities.

Displaying the list, dragging and dropping elements and saving the output works fine. I now would like to detect drop events to indicate which elements have been moved. This would help me to avoid updating the whole site structure while only a few elements have moved.

My nested list looks like this:

<ol id="structure" class="tree serialization">
  <li class="placeholder-children ui-droppable">
    LABEL
    <ol>
       <li class="placeholder-children ui-droppable">LABEL</li>
       <li class="placeholder-children ui-droppable">LABEL
         <ol>
          <li class="placeholder-children ui-droppable">LABEL</li>
         </ol>
       </li>
    </ol>
  </li>
</ol>

LI are all droppable and draggable

everything is initialized with:

<script>
  $(function  () 
    {
        $("ol.tree").sortable();
    })
</script>

Now comes the difficult part, I try to detect drop events.

The following one doesn't work at all:

$( ".placeholder-children" ).droppable({
drop: function( event, ui ) {
alert('dropped');
}
});
});

This one works but freezes my page:

<script>
$("ol.tree").sortable(
            {
                group: 'serialization',
                onDrop: function (item, container, _super) 
                    {
                        alert('dropped!');
                    }
            });
</script>

This code triggers the expected alert but the dragging freezes and I can't modify anything in my list anymore. It's like the whole screen is frozen as I can't move or click anything anymore. I need to reload the page get out of it.

Note: without the alert, it also freezes.

Any idea?

UPDATE: I have added a JSfiddle: http://jsfiddle.net/t9mp80yw/ but I don't know how to call the .js file so that the script can be initialized. I have tried to added the file hosted on my server but it looks like jsfiddle doesn't accept external files.

UPDATE2 I have tried the script with Firefox and Internet Explorer, same issue.

Thanks a lot

Laurent

PS: not shown here but jQuery, jQuery UI, jQuery Sortable are correctly loaded

Answer 1

stop: function(event, ui) {
    console.log('Sortable stop');
}

Answer 2

The onDrop function needs you to do certain things.

From http://johnny.github.io/jquery-sortable/#nested

onDrop: function (item, container, _super) {
    container.el.removeClass("active")
    _super(item)
}

It looks like super is a callback that needs to be called if you override onDrop. Replace your onDrop function with this and it works.

http://jsfiddle.net/xdjn2wqp/2/

The best way to learn a new library is to paste in some of their working example code and go from there.