Thursday, 15 March 2012

javascript - long row in jqueryui sortable with containment breaks sorting -



javascript - long row in jqueryui sortable with containment breaks sorting -

issue demonstrated: http://jsfiddle.net/vlvj9/1/

with html

<table> <tbody class="sortme"> <tr><td>foo</td></tr> <tr><td>bar</td></tr> <tr><td>really long , annoying table row, seek sort me!</td></tr> </tbody> </table>

and jqueryui

$(".sortme").sortable({ containment: "parent", tolerance: "pointer" }).disableselection();

if effort drag , sort either long row, parent container snaps width down. helper shoved left off screen new tiny parent, , unable sorted.

this doesn't occur without containment attribute. can modify placeholder's width in start() event maintain parent wide, appears containment info has been set point , helper exhibits same behavior.

is there way have parent maintain width info containment work expected?

believe question referring same behavior:

jqueryui sortable on table rows shrinks them while beingness dragged

my issue table contents populated ajax calls (status checking of user <input> content) , width can alter arbitrarily during page's lifetime, can't set px width on td or table.

define width parents in percentage:

<table style="width:100%;"> <div class="sortme" style="display: inline-block; width:100%;">

here updated fiddle

edit

since did not want width in percentage, calculated width of widest element , applied parent. here code

var width = $('.sortme div').width(); //returns max width matched elements $('#sortdiv').width(width); var width2 = $('.sortme tr td').width(); //returns max width matched elements $('#sorttable').width(width2);

the working fiddle

javascript jquery-ui sortable

No comments:

Post a Comment