Clever Geek Handbook

JQuery Drag issue: mousemove event optional on some elements

Using the latest jQuery / UI hosted by Google. I have 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 to the second, the mousemove function fires (and firebug logs out). But if I drag the second one li

up over the first, the mousemove function doesn't fire. You can see it livehttp://jsbin.com/ivala . Is there a reason for this? Should I catch the mousemove event in some other way?

Edit: It looks like the mousemove () event is optional on earlier elements than the one currently being dragged (must be bound to their mouse).

+2


source to share


3 answers


The dragged accessory seems to eat mouse move events. If the cursor is over the helper, the container below it will not receive mousemove events.

Try positioning the helper's offset away from the cursor so that the cursor never positions the helper directly below it. You can do this with the draggable cursorAt option:



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

+7


source


This is what I did and it works.



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


source


You can either try to add a css pointer-pointer style to your helper. This way, all events will flow through the moved element.

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

With full drag and drop material:

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


source






More articles:


All Articles