4

I have two possible use case of drag and drop using jQuery. In one case the drop works but only if you closely target the top of the .droppable div,

On the other case it just never works.

I really can't see what the problem is here, both should work just fine. I've tried playing with z-index as well but that's not solving anything.

LanFeusT
  • 2,392
  • 5
  • 38
  • 53

2 Answers2

3

So the issue was caused by a combination of the property: cursorAt that I've offset on purpose, which moves the helper to a different location from the cursor, and the default option "tolerance" on the droppable which is set to Intersect.

When tolerance is set to Intersect, it awaits for the draggable helper to intersect at least 50% with the droppable container. And since I was offsetting my helper it was rarely overlapping correctly.

Changing the droppable tolerance to "pointer" forces it to only accept the pointer as the draggable target.

var taskSelected = $("#tablecontainer tr.selected").length;

$("#tablecontainer tr.selected").draggable({
    cursor: "move",
    cursorAt: { top:-12, left: -20 },
    helper: function(event) {
        return $("<div class='ui-widget-header'>" + taskSelected  + " Tasks selected.</div>");
    }
});

$(".featureOrgDataWrapper .droppable").droppable({
    activeClass: "ui-state-highlight"
    , tolerance: "pointer"
    , drop: function (event, ui) {
        alert("success");
    }
});

Working versions: #1 and #2

LanFeusT
  • 2,392
  • 5
  • 38
  • 53
0

I'm not sure I've got this right, but ...

I added a clearfix class to your first example and it seems to work: http://jsfiddle.net/kboucher/4wBLG/

And I believe the reason the second example doesn't work at all is because the droppable container is actually next to the blue squares. (I'm guessing the blue sqaure represents the droppable area?)

Kevin Boucher
  • 16,426
  • 3
  • 48
  • 55
  • clearfix doesn't work if you try multiple times on either div, they act the same way they do now, the droppable only works at the top of te .droppable container. In the 2nd example the droppable container is not next to the blue, they are the blue squares, they just get highlighted and become blue. – LanFeusT Oct 18 '12 at 23:09
  • @Lan: If you inspect the dropzones in Firebug in the second example you will see that they are next to the blue squares. – Kevin Boucher Oct 18 '12 at 23:17
  • The drop zone to the right is the margin on my screen though Oo But I figured it out. – LanFeusT Oct 18 '12 at 23:22