Question

描述：

我有两个Infragistics DataGrids，一个是UI.Sortable，并接受来自第二个Grid UI.Draggable的行。

我使用receive事件来获取网格内部删除的新行位置/索引，以执行服务器请求，以相应地重新排序数据库中的行。

只要我在第一个网格中的现有行之间删除行，这一切都很有效。当我在网格中进一步向下移动一行时（网格本身由多个HTML表格元素和一个包含div标记组成），该行将被删除到网格的末尾（这是所需的行为），但是我得到的索引/位置总是＆＃39; 1＆＃39;。

代码：

var newItem; 
$("#tbl2 tr").draggable({
    connectToSortable: "#tbl",
    helper: 'clone'
});

$("#tbl").sortable({
    revert: true,             
    items: "tr",

    beforeStop: function (event, ui) {
        newItem = ui.item;
    },            
    receive: function (event, ui) {

        $newOrder = $(newItem).parent().children().index(newItem);
        alert($newOrder);
     }
}).disableSelection();

<div id="tbl">
    <table id="dataTbl">
        <tr><td><b>Test1</b></tr>
        <tr><td>1</td></tr>
        <tr><td>2</td></tr>
        <tr><td>3</td></tr>
        <tr><td>4</td></tr>
    </table>
</div>
<table id="tbl2">
    <tr><td><b>Test1</b></td></tr>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
</table>

演示（简化，我使用tables代替WebDataGrid并在第一个表周围添加div以重现相同的行为）

http://jsfiddle.net/4gLxH/10/

Answer 1

您的可排序#tbl不是表，而是包含实际表的div。这意味着，在某些情况下，拖动的行可以删除到表外，$(newItem).parent().children()是容器的子项，而不是行。

一个简单的解决方法是将您的表用作可排序的，类似这样的

var $receiver = $("#tbl").find('table');

$receiver.sortable({
    // ...
}).disableSelection();

并将draggables连接到此表：

$("#tbl2 tr").draggable({
    connectToSortable: $receiver,
    helper: 'clone'
});

请参阅http://jsfiddle.net/dn7Z4/了解演示。

Answer 2

正如nikoshr指出的那样，您的sortable是容器div#tbl，而不是其中的表。因此，该项目将附加到div#tbl。

他的answer是一种可行的解决方法。但是，如果您确实希望容器div#tbl是可排序的，请将已删除的项追加到其中的表中，并根据当前设置中的表检索索引，您可以按如下方式更新接收处理程序：

function (event, ui) {
   if(!$(newItem).parent().is('tbody')) // check whether it's a drop in container or not
        $(this).children('#dataTbl').append(newItem.remove()); //it so manually append the item to table
   $newOrder = $(newItem).parent().children().index(newItem);
   alert($newOrder);
 }

UI.Sortable：接收UI.Draggable时的默认位置/索引

2 个答案:

Demo