All geek questions in one place

JQuery UI Sortable + Toggle Problem

I am trying to implement a simple related sort, whose display can be switched by the user.

 $('#toggle').click(function(){ $('#content').toggle(); }); $('#target').sortable(); $('#source div').draggable({ connectToSortable: '#target', helper: 'clone' });

I have a problem. If the sorted (target) collapsed and the drag operation is performed, the sorting stops working.

See http://jsfiddle.net/9hGrs/12/

  • Press the toggle button to hide the sort
  • Drag any item from the source anywhere on the page and release it (i.e. this simulates an invalid drop).
  • Press the switch button again to show sorting
  • Now, when you try to drag an item from a source to a sortable one, it does not accept the dragged one.

Any idea what I'm doing wrong here? I would appreciate any help. Thanks!

+4
source share
2 answers

You need to use an invalid parameter, and also disable and enable the target when hiding:

 $('#toggle').click(function(){ if($('#content').is(":visible")) { $( "#target" ).sortable( "option", "disabled", true ); $("#content").hide(); } else { $( "#target" ).sortable( "option", "disabled", false ); $("#content").show(); } }); $('#target').sortable(); $('#source div').draggable({ connectToSortable: '#target', helper: 'clone', revert: 'invalid' });

Modified JSFiddle showing this work .

+5
source

This problem does not occur with jquery 1.6.1 / jquery-ui 1.8.14.

Updated script: http://jsfiddle.net/9hGrs/16/

+2
source

Source: https://habr.com/ru/post/1342392/

More articles:


All Articles