CODEWITHSUNDEEP
javascriptjqueryhtmldrag-and-drop
Kshitiz
Kshitiz

Reputation: 2940

Triggering Mousemove during Drag (HTML5)

Is there a way to trigger the mousemove event after the dragenter event is fired?

What I am trying to do is change the visual marker depending on which side of the element (left or right side) should the new text be entered depending on the mouse position over the element.

I have written the code for the behavior I want inside the mousemove event and I need to trigger it somehow during the drag event as well.

Here is my mousemove event that adds a marker before or after the hovered element depending on the mouse position inside the element.

on('mousemove', function(e) {
    e.stopPropagation();
    var rect = $(this).get(0).getBoundingClientRect();
    var mousePosPercent_X = ((event.clientX-rect.left)/(rect.right-rect.left))*100;
    var mousePosPercent_Y = ((event.clientY-rect.top) /(rect.bottom-rect.top))*100;
    if(mousePosPercent_X < 50)
    {
        if($(this).prev().is('.insertpos'))
        {
        }
        else
        {
            $(".droptest").find(".insertpos").remove();
            $(this).before("<li class='insertpos leftpos'></li>");
        }
    }
    else
    {
        if($(this).next().is('.insertpos'))
        {

        }
        else
        {
             $(".droptest").find(".insertpos").remove();
             $(this).after("<li class='insertpos leftpos'></li>");
        }
    }
});

Here is a fiddle for it http://jsfiddle.net/5K84p/1/

I HAVE to use the native HTML5 drag and drop and my sole purpose is to be able to detect the mousemove even when the drag events are going on.

Thanks a lot.

Upvotes: 3

Views: 1222

Answers (1)

Kshitiz
Kshitiz

Reputation: 2940

Dragmove Event did the trick.. Can't believe I wasted several hours before stumbling upon it!

Upvotes: 2

Related Questions