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

说明：

我有两个基础数据网格，一个是

UI.Sortable

，接受第二个网格中的行，第二个网格是

UI.Draggable

我使用

receive

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

只要我在第一个网格中的现有行之间放置行，这一切都非常有效。当我在网格中向下放置一行时（网格本身由多个HTML表元素和一个包含

div

标记组成），该行将被放置到网格的末尾（这是所需的行为），但我得到的索引/位置始终为“1”

代码：

var-newItem；
美元（“#tbl2 tr”）。可拖动({
connectToSortable:“#待定”，
助手：“克隆”
});
$（“待定”）。可排序({
回复：对，
项目：“tr”，
beforeStop：函数（事件、用户界面）{
newItem=ui.item；
},            
接收：功能（事件、用户界面）{
$newOrder=$（newItem）.parent（）.children（）.index（newItem）；
警报（$newOrder）；
}
}).disableSelection（）；

测试1
1.
2.
3.
4.
测试1
1.
2.
3.
4.

演示（简化后，我使用

表

而不是

WebDataGrid

，并在第一个表周围放置一个

div

，以重现相同的行为）

您的排序表

#tbl

不是一个表，而是一个包含实际表的

div

。这意味着，在某些情况下，可以将拖动的行放到表和

$（newItem）之外。parent（）。children（）

是容器的子级，而不是行

一个简单的修复方法是使用您的表作为排序表，类似这样

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

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

并将拖动表连接到此表：

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

请参阅以获取演示。

如前所述，您的排序表是容器

div#tbl

，而不是其中的表。因此，该项将附加到

div#tbl

他是一个可能的解决办法。但是，如果您确实希望容器

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

---

非常感谢。您的回答为我的问题提供了一个复制粘贴解决方案，即使使用WebDataGrid！非常感谢。你在这个问题上是完全正确的，但正如蒂尔温指出的，这会使桌子变得整洁，而不是div。但是谢谢你！