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

Question

我有一个非常特殊的问题，使用jQuery UI的sortable和dragable一起使用，我希望能够在新拖动的元素列表中得到indexplacement。我希望能够得到新拖动的元素在列表中的删除位置。如果我在列表中移动元素，我就能得到这个结果。

$("#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项目在sortable列表中的索引。

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 的属性。