JQuery ui sortable drag issue

Question

iam using jquery ui 10.1.3 and when dragging the rows vertically there is small shift in the width of the dragged row. and when looked at the forums looks like the below bug represents it. My table has non visible columns (hidden columns).

Do we have any fix for this ?

http://bugs.jqueryui.com/ticket/9979

https://github.com/jquery/jquery-ui/commit/9711c54c6d3d7ecffa9bfccc205522be1f4aa148

if we look at this link . jsbin.com/nohovilu/3/edit . In the first there is hidden columns and when dragging we can see there is a small shift vertically. let me know if that doesnt make sense. — user3496151
– user3496151, Commented May 14, 2014 at 17:14

musicnothing · Accepted Answer · 2014-05-14 17:55:08Z

5

The issue here is that jQueryUI is adding a placeholder row, with the class of ui-sortable-placeholder. The placeholder is set with visibility:hidden. This means that you can't see it, but it takes up the space it normally would if it were visible.

In this JSBin, the second column of every row is hidden. That means that the second column won't take up any space. The problem here is, when jQueryUI creates the placeholder column, it does not hide the second column.

Look at this JSFiddle and you'll see what I mean. The placeholder has an added blue column in between the first and second columns.

You could get rid of this multiple ways. One, by hard coding the CSS to hide the second column, as shown here, and in this code:

.ui-sortable-placeholder td:nth-child(2)
{
    display:none;
}

Another way is to add some code to hide the columns in the placeholder that are hidden in the real table, as shown here, and in this code:

sort: function (e, ui) {
    ui.placeholder.find('td').each(function (key, value) {
        //alternative: if (!ui.item.find('td').hasClass('hidden')) $(this).show();
        if (ui.helper.find('td').eq(key).is(':visible')) $(this).show();
        else $(this).hide();
    });
}

edited May 14, 2014 at 17:55

answered May 14, 2014 at 17:48

musicnothing

3,98526 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3496151 Over a year ago

Strange your fiddle works but the same code when i use its still the same issue

musicnothing Over a year ago

How many columns are in your table? Which columns are hidden?

user3496151 Over a year ago

There were around 78 odd columns and out of which 70 columns are hidden in the worst scenario.

Collectives™ on Stack Overflow

JQuery ui sortable drag issue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related