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
stop: function(event, ui) {
console.log('Sortable stop');
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With