jQuery 可通过 droppable 排序 - 索引未更新答案

【问题标题】：jQuery sortable with droppable - index not updatedjQuery 可通过 droppable 排序 - 索引未更新
【发布时间】：2014-05-10 00:43:19
【问题描述】：

编辑：

我发现在 drop 函数中， ui.draggable.index() 为我提供了拖放幻灯片的新索引。有没有办法可以将此索引传递给可排序的？

ui.draggable.hide("slow",function() {
            $(this).appendTo(dropList).show("slow");
            console.log(ui.draggable.index())  //correct index
});

我有一个 Angular 应用程序，我在其中使用 jQuery UI 拖放幻灯片。我一起使用 Sortable 和 Droppable 。

我正在尝试获取拖放到 droppable 上的可拖动元素的索引。但是，我没有得到新删除元素的更新索引；我总是得到旧索引。

当我将元素从一个可排序对象拖放到另一个可排序元素时，我确实得到了更新后的索引。

我可以在 sortable 中使用 'receive' 事件，但是当我将元素放在 droppable 上时不会触发。只有当我将一个元素从一个可排序的元素拖放到另一个可排序元素时（如预期的那样），它才会触发。

请看一看，帮帮我，我一整天都在头疼！！！

小提琴： http://jsfiddle.net/sriramr/UK5FP/4/

JS：

function SortableCTRL($scope) {
$scope.data = [{"title":"sub1","id":123},{"id":124,"title":"sub2"}];

$scope.sortableArray = [
    'One', 'Two', 'Three'
];
setTimeout(function() {
    $('.sortable').sortable({
        connectWith:'.sortable',
        stop:function(e,ui) {
             console.log(ui.item.index())   
        }
    });
    $(".cont").droppable({
    drop:function(event,ui) {
        var curr = $(this);
        var newId = "disp"+(curr.attr("id"))
        var newElem = $("#"+newId)
        var dropList = newElem.find(".sortable")
        ui.draggable.hide("slow",function() {
            $(this).appendTo(dropList).show("slow");
        });
    }
  });
});

}

【问题讨论】：

为什么要跟踪索引？角度并不总是需要这样做。
@j.wittwer：我想调用一个服务来更新所放幻灯片的新索引（或小节中的序列号）。
那么在新项目被放入可排序并排序后，您想知道排序列表中的新索引吗？
将新项目放入 DROPPABLE 后。

标签： jquery angularjs jquery-ui jquery-ui-sortable jquery-ui-droppable

【解决方案1】：

我发现了问题。我使用 .hide() 和 .show() 动画，以“慢”作为参数。因此，在新删除的列表中进行最终更新肯定要多花几微秒的时间。以这种方式修改代码有效：

http://jsfiddle.net/sriramr/UK5FP/7/

ui.draggable.hide("fast",function() {
            $(this).appendTo(dropList).show("slow");
        });

并在可排序的停止 fn 中添加 500 毫秒的延迟：

stop:function(e,ui) {
            setTimeout(function() {
                console.log(ui.item.index())    
            },500)
        }

我不确定引入 500 毫秒延迟是否是个好主意，但这是我目前唯一的解决方法。

【讨论】：