javascript - UI.Sortable : Default position/index when receiving a UI. 可拖动

Question

描述:

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

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

一切都很好，只要我在第一个网格中的现有行之间放置行。当我在网格中进一步向下放置一行时(网格本身由多个 HTML 表格元素和一个包含 div 标记组成)，该行被放置到网格的末尾(这是所需的行为)，但我得到的索引/位置始终为“1”。

代码:

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>

Demo(简化后，我使用 tables 而不是 WebDataGrid 并在第一个表周围放置一个 div重现相同的行为)

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

Answer 1

作为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);
 }

Demo