blocks|key|1472780|text|我找到了答案here。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1472781|我稍微修改了一下，以克隆行，而不是向原始行添加宽度：|1472782|++helper:+function(e,+tr)
++{
++++var+$originals+=+tr.children();
++++var+$helper+=+tr.clone();
++++$helper.children().each(function(index)
++++{
++++++//+Set+helper+cell+sizes+to+match+the+original+sizes
++++++$(this).width($originals.eq(index).width());
++++});
++++return+$helper;
++},|code-block|syntax|javascript|1472783|entityMap|0|LINK|mutability|MUTABLE|url|http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/^0|6|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

I found the answer <a href="http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/" rel="noreferrer">here</a>.

I modified it slightly to clone the row, instead of adding widths to the original:

<pre><code> helper: function(e, tr)
 {
 var $originals = tr.children();
 var $helper = tr.clone();
 $helper.children().each(function(index)
 {
 // Set helper cell sizes to match the original sizes
 $(this).width($originals.eq(index).width());
 });
 return $helper;
 },
</code></pre>

blocks|key|1258498|text|我认为这会有所帮助：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1258499|.ui-sortable-helper+{
++++display:+table;
}|code-block|syntax|javascript|1258500|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I think it can help:

<pre><code>.ui-sortable-helper {
 display: table;
}
</code></pre>

blocks|key|1472823|text|似乎克隆行在IE8上不能很好地工作，但是原始的解决方案可以。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1472824|已使用jsFiddle进行测试。|offset|length|1472825|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/bgrins/tzYbU/^0|0|3|8|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

It's seems that cloning the row doesn't work well on IE8,
but the original solution does.

Tested with the <a href="http://jsfiddle.net/bgrins/tzYbU/" rel="noreferrer">jsFiddle</a>.

blocks|key|1258225|text|当您的表准备好排序时，调用以下代码，这将确保您的td元素在不破坏表结构的情况下具有固定的with。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1258226|+$(".tableToSort+td").each(function+()+{
++++++++++++$(this).css("width",+$(this).width());
++++++++});++|code-block|syntax|javascript|1258227|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Call this following code when your table is ready to be sorted,
this will make sure your td elements has a fixed with without breaking table structure.

<pre><code> $(".tableToSort td").each(function () {
 $(this).css("width", $(this).width());
 }); 
</code></pre>

blocks|key|1473266|text|jsFiddle|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1473267|经过许多不同的尝试后，我只是尝试了一个简单的解决方案，它完成了Dave+James+Miller的解决方案，以防止表在拖动最大行时收缩。我希望它能有所帮助:)|1473268|//+Make+sure+the+placeholder+has+the+same+with+as+the+orignal
var+start+=+function(e,+ui)+{
++++let+$originals+=+ui.helper.children();
++++ui.placeholder.children().each(function+(index)+{
++++++++$(this).width($originals.eq(index).width());
++++});
}
//+Return+a+helper+with+preserved+width+of+cells
var+helper+=+function(e,+tr)+{
++++let+$helper+=+tr.clone();
++++let+$originals+=+tr.children();
++++$helper.children().each(function+(index)+{
++++++++$(this).width($originals.eq(index).outerWidth(true));
++++});
++++return+$helper;
};|code-block|syntax|javascript|1473269|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/nhr849cv/13/^0|0|8|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<a href="https://jsfiddle.net/nhr849cv/13/" rel="nofollow noreferrer">jsFiddle</a>

After a lot of different attempts I just tried a simple solution which completes the solution of Dave James Miller to prevent the table of shrinking while dragging the largest row. I hope it will helps :)

<pre><code>// Make sure the placeholder has the same with as the orignal
var start = function(e, ui) {
 let $originals = ui.helper.children();
 ui.placeholder.children().each(function (index) {
 $(this).width($originals.eq(index).width());
 });
}
// Return a helper with preserved width of cells
var helper = function(e, tr) {
 let $helper = tr.clone();
 let $originals = tr.children();
 $helper.children().each(function (index) {
 $(this).width($originals.eq(index).outerWidth(true));
 });
 return $helper;
};
</code></pre>

blocks|key|1473290|text|.sortable({
++++helper:+function+(e,+ui)+{
++++++++ui.children().each(function+()+{
++++++++++++$(this).width($(this).width());
++++++++});
++++++++return+ui;
++++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1473291|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>.sortable({
 helper: function (e, ui) {
 ui.children().each(function () {
 $(this).width($(this).width());
 });
 return ui;
 }
});
</code></pre>

blocks|key|1258348|text|Keith的解决方案很好，但在Firefox中产生了一些破坏，它没有将colspans加起来，而是暗示了它们。(旧的js字符串类型的膝部疼痛)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1258349|替换此行：|1258350|+cellCount+%2B=+colspan;|code-block|syntax|javascript|1258351|通过以下方式：|1258352|+cellCount+%2B=+colspan-0;|1258353|修复了问题。(因为js被强制将变量视为数字而不是字符串)|1258354|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Keith' solution is fine but produced a little havoc in Firefox which did not add up the colspans but cued them. (The old js string type pain in the knee)

replacing this line:

<pre><code> cellCount += colspan;
</code></pre>

with: 

<pre><code> cellCount += colspan-0;
</code></pre>

Fixes the problem.
(As js is forced to treat the variables as numbers instead of strings)

blocks|key|1258411|text|Dave+James+Miller的回答对我很有效，但由于我页面上容器div的布局，拖动鼠标光标的辅助工具偏离了我的鼠标位置。为了解决这个问题，我在helper回调函数中添加了以下内容|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1258412|$(document.body).append($helper);|code-block|syntax|javascript|1258413|下面是添加了上面一行代码的完整回调：|1258414|helper:+function+(e,+tr)+{
++var+$originals+=+tr.children();
++var+$helper+=+tr.clone();
++$helper.children().each(function+(index)+{
++++//+Set+helper+cell+sizes+to+match+the+original+sizes
++++$(this).width($originals.eq(index).width());
++});

++//+append+it+to+the+body+to+avoid+offset+dragging
++$(document.body).append($helper);

++return+$helper;
}|1258415|我会把这个作为评论添加到Dave的回答中，但我在这个账户上没有足够的代表。|1258416|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Dave James Miller's answer worked for me, but because of the layout of the container divs on my page, the helper that drags with the mouse cursor is offset from the position of my mouse. To fix that, I added the following to the helper callback

<pre><code>$(document.body).append($helper);
</code></pre>

Here is the complete callback with the above line added:

<pre><code>helper: function (e, tr) {
 var $originals = tr.children();
 var $helper = tr.clone();
 $helper.children().each(function (index) {
 // Set helper cell sizes to match the original sizes
 $(this).width($originals.eq(index).width());
 });

 // append it to the body to avoid offset dragging
 $(document.body).append($helper);

 return $helper;
}
</code></pre>

I would have added this as a comment to Dave's answer, but I did not have enough rep on this account.

blocks|key|1258451|text|看起来disableSelection()方法很糟糕，现在已经被弃用了。在Mozilla+Firefox+35.0中，我不能再在可排序行中使用文本输入。它只是不再是可聚焦的了。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1258452|entityMap^0|3|I|11|K|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

It seems like <code>disableSelection()</code> - method is bad and deprecated nowadays. I can't use text inputs inside sort-able row anymore in <code>Mozilla Firefox 35.0</code>. It just isn't focusable anymore.

blocks|key|1473190|text|$(function()+{
++++$(+"#sort+tbody"+).sortable({
++++++++update:+function+()+{
++++++++++++++++++++++++++++++++var+order+=+$(this).sortable("toArray").join();
++++++++++++++++++++++++++++++++$.cookie("sortableOrder",+order);
++++++++++++++++++++++++}
++++});
++++if($.cookie("sortableOrder")){
++++++++var+order+=+$.cookie("sortableOrder").split(",");
++++++++reorder(order,+$("#sort+tbody"));
++++}
++++function+reorder(aryOrder,+element){
++++++$.each(aryOrder,+function(key,+val){
++++++++++++++element.append($("#"%2Bval));
++++++});
++++}
++});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1473191|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$(function() {
 $( "#sort tbody" ).sortable({
 update: function () {
 var order = $(this).sortable("toArray").join();
 $.cookie("sortableOrder", order);
 }
 });
 if($.cookie("sortableOrder")){
 var order = $.cookie("sortableOrder").split(",");
 reorder(order, $("#sort tbody"));
 }
 function reorder(aryOrder, element){
 $.each(aryOrder, function(key, val){
 element.append($("#"+val));
 });
 }
 });
</code></pre>

blocks|key|1472961|text|将可排序应用于表的tbody元素，并将helper设置为'clone'，如jquery-ui的API中所述|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1472962|$("$my-table-tbody").sortable({
++++helper:+"clone"
});|code-block|syntax|javascript|1472963|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jqueryui.com/sortable/#option-helper^0|1B|3|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Apply the sortable to the table's tbody element and just set the helper to 'clone', as described in jquery-ui's <a href="http://api.jqueryui.com/sortable/#option-helper" rel="nofollow">API</a>

<pre><code>$("$my-table-tbody").sortable({
 helper: "clone"
});
</code></pre>

I am using jQuery UI sortable to make my table grid sortable. The code seems to work fine but because I am not adding width to <code>td</code>s, when I drag the <code>tr</code> it shrinks the content.

For example; if my table row is 500px when I start dragging, it becomes 300px. I assume that's happening because no width is defined in the grid. That's because I am using two classes for the <code>td</code>s (<code>fix</code> and <code>liquid</code>).

The <code>fix</code> class makes the <code>td</code> equal to the content width and <code>liquid</code> makes the <code>td</code> width 100%. It's my approach for grid table without having to assign width to <code>td</code>s.

Any idea how to make sortable work with my approach?

jquery UI Sortable with table and tr width

容器

jQuery

我正在使用jQuery UI sortable来使我的表格网格可排序。代码看起来运行得很好，但是因为我没有给td增加宽度，所以当我拖动tr时，它会缩小内容。例如，如果我开始拖动时我的表格行是500px，那么它就变成了300px。我认为这是因为网格中没有定义宽度。这是因为我对td使用了两个类(fix和liquid)。fix类使td等于内容宽度，liquid使td宽度达到100%。这是我处理网格表的方

问具有表和tr宽度的jquery UI可排序
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有表和tr宽度的jquery UI可排序EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有表和tr宽度的jquery UI可排序
EN