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

时间:2014-06-19 08:18:13

标签: javascript jquery jquery-ui jquery-ui-draggable jquery-ui-sortable

描述

我有两个Infragistics DataGrids,一个是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>

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

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

2 个答案:

答案 0 :(得分: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/了解演示。

答案 1 :(得分: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