jQueryUI。 DnD 从 sortable 到 droppable (out of the list) 不稳定（不是每次都掉）

Question

我正在尝试将 "sortable" 函数与 "droppable" 结合使用。但是当从 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");
    }
})

JSFiddle http://jsfiddle.net/27bom9sb/

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

更新

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

这里是短行的例子（稳定）：http://jsfiddle.net/usv496dm/1/

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

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

Answer 1

使用这个脚本

Use tolerance property for the droppable.

Set tolerance property to "touch" or "pointer".

<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>

对我有用。 希望这有帮助