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

【问题标题】：jQuery UI sortable and draggable. Getting the index of dragged elementjQuery UI 可排序和可拖动。获取被拖动元素的索引
【发布时间】：2013-08-07 08:04:14
【问题描述】：

我遇到了一个非常具体的问题，同时使用可排序和可拖动的 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: 中执行相同操作而不是接收：它会返回 -1，这与丢弃它的位置无关。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-sortable jquery-ui-draggable

【解决方案1】：

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

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

【讨论】：

【解决方案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();

【讨论】：

在控制台中既不能工作，也不能写任何东西，但找到了另一个解决我的问题的方法，我需要索引号。
@JesperNielsen 您的控制台没有输出任何内容，因为您拼写错误。它应该是 console.log(out)，而不是 console.lo(out)。希望对您有所帮助。
嘿@JesperNielsen 非常感谢您在这里提出问题，然后抱怨您提供的答案，然后告诉我们您找到了解决方案，但没有提供该解决方案的描述或指针。我只是喜欢人们在论坛上这样做。长寿和繁荣。
这不起作用，因为可拖动对象上的“创建”事件总是传递一个空的 ui 对象。来自文档“注意：ui 对象是空的，但为了与其他事件保持一致而包含在内。” api.jqueryui.com/draggable/#event-create
看起来 sortable() 上的 stop 或 beforeStop 事件都可以正常工作。我认为原始代码不起作用的唯一原因可能是console.lo() 错字

【解决方案3】：

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

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

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

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

【讨论】：