CODEWITHSUNDEEP
jqueryuser-interfacejquery-ui-sortable
user3496151
user3496151

Reputation: 191

JQuery ui sortable drag issue

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

Upvotes: 3

Views: 1170

Answers (1)

musicnothing
musicnothing

Reputation: 3985

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();
    });
}

Upvotes: 5

Related Questions