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％超过可放置区域时才接受draggables。因为您没有在拖动器上设置宽度，所以它们比您的可放置宽度的两倍宽。

您可以通过设置

来解决此问题

tolerance:"touch"

你的droppable上的

会让它接受任何在触摸时掉落的元素，如this example或

tolerance:"pointer"

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

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

jQuery拖放不“接受”我的drop

1 个答案: