Hiding the sort part of a jquery div widget

Question

I have a markup like the one below and I'm trying to hide the "some_row" TR.

<div id="sortable"> <table> <tr><td>Some Title 1</td></tr> <tr class="some_row"><td><textarea ...></td><tr> </table> <table> <tr><td>Some Title 2</td></tr> <tr class="some_row"><td><textarea ...></td><tr> </table> </div> 

Here is what I tried:

 $(function () { $("#sortable") .sortable({ helper: function (e, o) { o.find("#some_row").hide(); return o; }, start: function () { $(".some_row").hide(); }, stop: function () { $(".some_row").show(); } }) .disableSelection(); }); 

Initially, I started with start and stop events, then added helper , because, what I guess, this is the cloned selected row, it has a hidden element some_row, but with the same height.

In any case, the above works fine, but it seems the widget still takes into account the original heights of the surrounding divs.

Is there anything I can do to save this idea?

Answer 1

You need to call hide on .somerow before the helper returns.

Helper is a clone of the original div and what you see is being dragged. Therefore, when you hide the lines, the clone is already created.

An update that starts after launch is performed to reload the sorted objects to adjust the new height.

Script example

 $(function () { $("#sortable") .sortable({ cursor: 'move', cursorAt: { left: 0, top: 10 }, helper: function (e, o) { $(".some_row").hide(); o.find("#some_row").hide(); return o; }, start: function () { $( "#sortable" ).sortable( "refresh" ); }, stop: function () { $(".some_row").show(); } }) .disableSelection(); }); 

You can also determine the position of the cursor when dragging (relative to the helper) and the type of cursor that appears when you hover using the cursor and cursorAt options jqueryui sortable api