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!"); 
    } 
}); 

在小提琴，我试图拖动“试验＃1”或“测试＃2”走进绿色的div区域，但它不工作。任何帮助，将不胜感激！

Answer 1

默认情况下，jQueryUI droppables设置为只接受可拖动，当其宽度的至少50％超过可放置区域时。由于您尚未在可拖动内容上设置宽度，因此它们比可拖放宽度的两倍宽。

您可以通过设置

tolerance:"touch" 

您可放开

解决这个问题，这将使其接受触摸它时，在this example或

tolerance:"pointer" 

这将导致任何元素降到您可放开接受任何在鼠标指针位于可放下的位置时，可拖动的元素将被放下，如this example。

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