0

table我使用了一个 jQuery 插件（带有 Scroller 扩展的 DataTable），由于延迟渲染，它允许我用千行显示 HTML 。

我想做它sortable（使用可排序的 jQuery-UI 插件）。

问题是，当我拖动一个元素并想将其放得更低时，nodes表格的第一个从 DOM 中消失，而新的出现了。所以我不再能够放下拖动的元素。

一个例子比长文本更好：http: //jsfiddle.net/91dr6utg/

$(document).ready(function() {
    $('#example').DataTable( {
        data:           data,
        deferRender:    true,
        dom:            "frtiS",
        scrollY:        200,
        scrollCollapse: true
    } );
    
    $('#example tbody').sortable({
        helper: "clone",
        start: function (event, ui) {
            ui.item.appendTo($('#dragSave'));
            ui.helper.appendTo($('#dragSave'));
        },
    }).disableSelection();
});

var data = [ "A lot of datas !" ];
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>First name</th>
            <th>Last name</th>
            <th>ZIP / Post code</th>
            <th>Country</th>
        </tr>
    </thead>
</table>

<div id="dragSave"></div>
（在 jsfiddle.net 中尝试，代码段中允许的行太多）

如果我拖动第一个元素，我不能在第 90 个元素之后放下它。

更多信息 ：

我做了start防止拖线消失的功能。node事实上，如果从 DOM 中删除原始元素，sortable插件就不能再删除元素（它不再知道它了）。所以我将它移动到另一个永远不会更新的 DOM 容器中。

如果我们删除这个函数，我们会看到原始node被删除了大约 50 行以下
=> 好的，这来自 DOM 重新生成，
但是我们仍然可以删除元素直到 90 行以下
=> 因为下一行从未在DOM，这是极限

4

1 回答 1

0

我找到了一种不使用sortable()但使用的方法draggable()。

这是：http: //jsfiddle.net/2dtcy9bs/1/

于 2015-07-23T13:18:24.343 回答