Question

我有一个非常具体的问题，使用jQuery UI可排序和可拖动在一起。我希望能够在新拖动元素的列表中获取索引/位置。如果我在列表中移动元素，我就能得到它。

$("#draggable").draggable({
    cursor: "move",
    helper: "clone",
    connectToSortable: ".sortable"
});
$( ".sortable" ).sortable({
    items: 'li',
    stop: function(event, ui) {
        index = ui.item.index()+1;
        console.lo(index);
    },
    connectWith: ".sortableSub",
    appendTo: 'body',
}).disableSelection();

上面的代码可以正常工作，但如果我对拖动的元素执行相同的操作。

receive: function(event, ui) {
    console.log(ui.item.index());
},

使用ui.item.index只返回0，如果我在stop中执行相同的操作：而不是receive：它返回-1，而不管它被丢弃的位置。

Answer 1

这里是如何获取可排序列表中ADDED项的索引的解决方案。

receive: function( event, ui ) {
  var newIndex = $(this).data("ui-sortable").currentItem.index()
}

Answer 2

试试这个：

$("#draggable").draggable({
    cursor: "move",
    helper: "clone",
    connectToSortable: ".sortable"
});
$( ".sortable" ).sortable({
    items: 'li',
    stop: function(event, ui) {
        index = ui.item.index()+1;
        console.log(index);
    },
    connectWith: ".sortableSub",
    appendTo: 'body',
}).disableSelection();

$( "#draggable" ).on( "dragcreate", function( event, ui ) {

  console.log(ui.item.index());
});

或试试这个：

$("#draggable").draggable({
    cursor: "move",
    helper: "clone",
    connectToSortable: ".sortable",
    create: function( event, ui ) {
        var index = ui.item.index()+1;
         console.log(index);
    }
});
$( ".sortable" ).sortable({
    items: 'li',
    stop: function(event, ui) {
        index = ui.item.index()+1;
        console.log(index);
    },
    connectWith: ".sortableSub",
    appendTo: 'body',
}).disableSelection();

Answer 3

这是在ui.sortable中拖动项目的解决方案。

在Receive功能上，使用**ui.item.sortable.model**获取被拖动的对象。

receive: function(event, ui) 
{
   console.log("Task No : " + ui.item.sortable.model.SID);
},

注意：我的对象具有一个名为SID的属性。

jQuery UI可排序和可拖动。获取拖动元素的索引

3 个答案: