Geek Answers Handbook

Fall detection using jQuery sort

I play with jQuery Sortable ( http://johnny.imtqy.com/jquery-sortable/ ) to display nested lists, move items and then save the final results. The ultimate goals are to manage the site structure / hierarchy by displaying categories and pages with drag and drop capabilities.

List displaying, dragging items and saving output is excellent. Now I would like to detect drop events to indicate which items were moved. This will help me not to update the whole site structure while only a few elements are being moved.

My nested list is as follows:

<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 all inaccessible and dragged

everything is initialized with:

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

Now comes the hard part, I'm trying to detect drop events.

The following file does not work at all:

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

This works, but freezes my page:

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

This code triggers the expected warning, but the drag stops, and I can’t change anything else in my list. He, like the whole screen, froze, because I can no longer move or press anything. I need to reload the page to exit it.

Note: without warning, it also freezes.

Any idea?

UPDATE: I added JSfiddle: http://jsfiddle.net/t9mp80yw/ but I don’t know how to call the .js file so that the script can be initialized. I tried adding a file hosted on my server, but it seems that jsfiddle is not accepting external files.

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

Thank you so much

Laurent

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

+8
jquery jquery-ui jquery-ui-sortable
source share
1 answer

The onDrop function requires you to do certain things.

From http://johnny.imtqy.com/jquery-sortable/#nested

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

Super seems to be a callback that needs to be called if you override onDrop . Replace the onDrop function with this, and it works.

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

The best way to learn the new library is to insert part of the code of your working code and go from there.

+2
source share

More articles:


All Articles