jQuery drag and drop not "accepting" my drop

Question

This is probably a simple thing I am over looking, but I am trying to implement drag and drop on my website. It does not seem to be working though. I created a fiddle demo that is exhibiting the odd behavior. Here is my code:

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

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

In the fiddle, I am trying to drag "test #1" or "test #2" into the green div area, but it isn't working. Any help would be appreciated!

Answer 1

By default jQueryUI droppables are set to only accept draggables when at least 50% of its width is over the droppable area. Because you have not set a width on your draggables, they are much wider than double your droppables width.

You can remedy this by setting

tolerance:"touch"

on your droppable which will make it accept any element dropped when touching it as in this example or

tolerance:"pointer"

which will cause your droppable to accept any draggable element that is dropped while the mouse pointer is over the droppable, as in this example.

Alternatively, you could set a width on your draggables which is less than twice the width of your droppable area, or combine a set width with one of the above options for a better user experience.