CODEWITHSUNDEEP
jqueryjquery-uidraggabledroppabledrag-and-drop
saturdayplace
saturdayplace

Reputation: 8710

jQuery Drag/Drop problem: mousemove Event not binding for some elements

Using the latest jQuery/UI that are hosted at Google. I've got the following markup:

<ul id="tree">
    <li><a href="1/">One</a></li>
<li><a href="2/">Two</a></li>
</ul>

And the following javascript:

$(document).ready(function(){

    // Droppable callbacks
function dragOver(overEvent, ui_object) {
    $(this).mousemove(function(moveEvent){
        console.log("moved over", this);
    });
}

function drop_deactivate() {
    $(this).unbind();
}

function drag_out() {
    $(this).unbind();
}

// Actual dragging
$("#treeContainer li").draggable({
    revert: true,
    revertDuration: 0
});

// Actuall dropping
$("a").droppable({
    tolerance: "pointer",
    over: dragOver,
    deactivate: drop_deactivate,
    out: drag_out
});

});

If I drag the first li down over the second, the mousemove function fires (and firebug logs the output). But if I drag the second li up over the first, the mousemove function doesn't fire. You can see this live at http://jsbin.com/ivala. Is there a reason for this? Should I be trapping the mousemove event in some other way?

Edit: It appears as thought the mousemove() event isn't binding for earlier elements than the one currently being dragged (should be bound upon their mouseover).

Upvotes: 2

Views: 4577

Answers (3)

user3550446
user3550446

Reputation: 455

This is what I have done and it works.

$(dragMe).draggable({ 
   start : function(e){
             $(this).css({'pointer-events': 'none'});
         }, 
   stop: function(e){
             $(this).css({'pointer-events': 'all'});
         }
})

Upvotes: 2

Lionel
Lionel

Reputation: 11

You could either try to add the pointerEvents CSS style to your helper. That way, all events would pass though the dragged element.

clone.css('pointerEvents', 'none');

With the full draggable stuff:

element.draggable({
    helper: function() {
        var clone = element.clone();
        clone.css('pointerEvents', 'none');
        return clone;
    }
})

Upvotes: 1

Max
Max

Reputation: 7119

It appears the draggable's helper element is eating the mouse move events. If the cursor is over the helper the container underneath will not receive mousemove events.

Try to position the helper offset from the cursor so the cursor never has the helper element directly underneath it. You can do this with draggable's cursorAt option:

draggable({ cursorAt: { top: 5, left: 5 } })

Upvotes: 8

Related Questions