CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-pluginsjquery-ui-sortable
user765368
user765368

Reputation: 20356

jQuery Sortable plugin on table cells shrink while dragging

I'm using the jQuery Sortable UI to be able to move the rows in a table but I'm having the following problem:

If any of the table cells have data that are not equal in size (which results to an increase or decrease in the width of the cell), the table cells (the tds) shrink while moving a row to a new position. You can see a demonstration here.

Also, how do I make it so that only when I click in the first column (the empty column at the beginning of the table) of the corresponding row that I should be able to move that row?

Any help please!!!!!!!

Thanks in advance

Upvotes: 0

Views: 1581

Answers (2)

orolo
orolo

Reputation: 3951

http://jsfiddle.net/tUa3w/6/

$('.test1 > tbody').sortable({     
    helper: function(event, ui) {
        var myHelper = [];
        myHelper.push('<table style="width: 100%">');
        myHelper.push($(ui).html());
        myHelper.push('</table>');

        return myHelper.join('');
    },
    items: '.item1' 
})

What I think is happening is that your helper element had no table to fill out its' width. It's not perfect yet but maybe you can take it from here or someone else can chime in.

Upvotes: 3

superUntitled
superUntitled

Reputation: 22547

I have updated the code here: http://jsfiddle.net/tUa3w/4/

Setting the width of the table to 100% and the td's width to 20% is the simple way. You could set the width of the table to 600px, and each td to 120px.

Use the 'handle' option for the handle.

Upvotes: 0

Related Questions