jQuery UI.从可排序到可丢弃(不在列表中)的 DnD 不稳定(不会每次都删除)

Question

我正在尝试将"sortable"函数与"droptable"结合使用。但当从sortable拖动时，每次拖放都不会发生drop事件。以下是代码示例：

$(".sortable tbody").sortable({
    start: function(ev, ui) {
        console.log("start");
        var id = ui.item.children()[0].textContent;
        $(ui.item).data("id", id);
    },
    opacity: 0.5
});
$(".droppable").droppable({
    drop: function(ev, ui) {
        console.log("drop");
        this.value = $(ui.draggable).data("id");
    }
})

JSFiddlehttp://jsfiddle.net/27bom9sb/

这里出了什么问题，有没有更好的方法来复合它们？

更新

经过一些额外的测试，发现下落稳定性取决于可拖动行长度：

以下是短行（稳定）的示例：http://jsfiddle.net/usv496dm/1/

相同的示例，但具有较长的行文本（不稳定）：http://jsfiddle.net/usv496dm/2/

我不知道为什么稳定性取决于行长度，但现在我认为这是使用sortable+dropable的错误方式。

Answer 1

使用此脚本

对可滴管使用公差特性。

将公差属性设置为"触摸"或"指针"。

<script>
        $(function () {
            $(".sortable tbody").sortable({
                start: function (ev, ui) {
                    var id = ui.item.children()[0].textContent;
                    $(ui.item).data("id", id);
                }
            });
            $(".droppable").droppable({
                tolerance: "touch",
                drop: function (ev, ui) {
                    console.log("drop");
                    this.value = $(ui.draggable).data("id");
                }
            })
        });
    </script>

为我工作。希望这能帮助