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。

或者，您可以在可拖動的區域上設置寬度小於可放置區域寬度的兩倍，或將設置寬度與上述選項之一組合以獲得更好的用戶體驗。