CODEWITHSUNDEEP
javascriptjqueryjquery-uidrag-and-drop
user1569339
user1569339

Reputation: 683

jQuery UI not detecting drop on first child of droppable

I have a droppable div that contains child elements that are not droppable.

For some reason, if you drop on the first child element, the drop event is not triggered, but it is on the second child element.

Here's a JSFiddle example: http://jsfiddle.net/bppn33q3/1/

Why is this? And how can I fix it?

EDIT: Wrong fiddle

Upvotes: 1

Views: 186

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 240928

It actually is working. Look at what happens when you remove margin-top: 50px.

.drag {
    padding: 10px;
    width: 25%;
    background-color: aqua;
}

Updated Example

As you can see, the margin affects the placement calculations.

You could always play around with the tolerance option - (example).

$('.drop').droppable({
    accept: '.drag',
    tolerance: "pointer",
    drop: function () {
        alert('dropped');
    }
});

Upvotes: 1

useSticks
useSticks

Reputation: 904

Playing with your fiddle, it appears that the issue is the css.

Check out my new fiddle after I removed your margin:

http://jsfiddle.net/bppn33q3/2/

.drag {
    padding: 10px;
    width: 25%;
    background-color: aqua;
}

Upvotes: 1

Related Questions