jQuery拖放不“接受”我的拖放

Question

这可能是我正在寻找的一件简单的事情，但我正在尝试在我的网站上实现拖放。它似乎没有工作。我创建了一个 fiddle demo，它表现出奇怪的行为。这是我的代码：

$(function() {
    $("li", "#hostsList").draggable({
        revert: "invalid",
        cursor: "move",
        containment: "document"
    });

    $("#selectedHosts").droppable({
        accept: "#hostsList > li",
        drop: function(event, ui) {
        alert("Dropped!");
    }
});

在小提琴中，我试图将“test #1”或“test #2”拖到绿色 div 区域，但它不起作用。任何帮助将不胜感激！

Answer 1

默认情况下，jQueryUI droppables 设置为仅在其宽度的至少 50% 超过可拖放区域时才接受可拖动对象。因为您没有在您的可拖动对象上设置宽度，所以它们比您的可放置对象宽度的两倍宽。

你可以通过设置来解决这个问题

tolerance:"touch"

在您的 droppable 上，这将使其接受触摸时丢弃的任何元素，如 this example 或

tolerance:"pointer"

这将导致您的 droppable 接受当鼠标指针悬停在 droppable 上方时放置的任何可拖动元素，如 this example。

或者，您可以将可拖动区域的宽度设置为小于可放置区域宽度的两倍，或者将设置的宽度与上述选项之一结合起来以获得更好的用户体验。