在可排序的 jquery ui 中自定义拖放答案

【问题标题】：Customize drag and drop in sortable jquery ui在可排序的 jquery ui 中自定义拖放
【发布时间】：2015-12-01 10:48:43
【问题描述】：

我正在使用 jquery ui 连接列表在 2 个 uls 之间拖放。现在拖放工作正常。我想为这两个水滴编写自定义函数。我将如何实现这一点？

我尝试了以下方法，但对我没有用（这对两次下降都执行）

  $("#sortable1").sortable({
    update: function (event, ui) {
        debugger;
        var id = ui.item.attr("id");
        alert(id);
        var val = ui.item.val();
        alert(val);
        var index = ui.item.index()+1;
        alert(index)
    }
});

这不会对两个 drop 执行

 $("#sortable2").droppable({
    update: function (event, ui) {
        debugger;
        var id = ui.item.attr("id");
        alert(id);
        var val = ui.item.val();
        alert(val);
        var index = ui.item.index() + 1;
        alert(index)

    }
});

【问题讨论】：

你也可以粘贴一些 HTML 吗？
@burflip 我明白了。我不应该使用更新。而不是我必须使用接收。

标签： javascript jquery jquery-ui drag-and-drop

【解决方案1】：

我需要使用接收而不是更新

对于第一个 ul drop 函数：

$("#sortable1").droppable({
receive: function (event, ui) {
    debugger;
    var id = ui.item.attr("id");
    alert(id);
    var val = ui.item.val();
    alert(val);
    var index = ui.item.index() + 1;
    alert(index)

}});

对于第二个 ul drop 函数：

$("#sortable2").droppable({
receive: function (event, ui) {
    debugger;
    var id = ui.item.attr("id");
    alert(id);
    var val = ui.item.val();
    alert(val);
    var index = ui.item.index() + 1;
    alert(index)

}});

【讨论】：