Programmatically fire HTML5 dragstart after mousemove

Question

I am currently struggling with HTML5 drag'n drop as I'd like to achieve something specific.

I have a div that can be dragged using the HTML5 API, but I only want the drag to occur if the user really means it (as it triggers some more handlers afterwards).

That is why I trigger a dragstart when a certain condition is met from mousemove .

var fnMousemove = function (oEvent) {
    if (myCondition) {
        document.removeEventListener("mousemove", fnMousemove);
        oDraggable.setAttribute("draggable", true);
        oDraggable.addEventListener("dragstart", fnDragstart);
        oDraggable.addEventListener("drag", fnDrag);
        oDraggable.addEventListener("dragend", fnDragend);

        // Fire a dragstart event, now that we know what to do with it
        var e = document.createEvent("MouseEvents"); //$NON-NLS-1$
        e.initEvent("dragstart"); //$NON-NLS-1$
        oDraggable.dispatchEvent(e);
    }
};

But as you can already guess, that's not working in the sense that the dragstart is properly fired, but no other drag event ( drag , dragend ...).

Is there something I'm not properly handling there ? Or can you see a workaround to launch the browser's drag'n drop from a mousemove handler ? (mouse button being held down)

Thanks in advance!

You can find a simple running example here

Answer 1

It appears the mechanism that normally fires dragstart anticipates the other events that usually follow dragstart and fires them accordingly.

So if you're firing dragstart event by yourself, then you'd have to implement the rest of the process flow as well, yourself.

To solve your problem particularly, I'd suggest that you create the user experience as follows:

1. instruct user to click on the respective area in order to enable dragging
2. after user has click on the area, show a feedback to indicate that dragging may now be used.

It simply means what you should be looking for is how to improve the user experience based on the current status of the drag and drop API.

Answer 2

As igwe-kalu said you have to implement the drag event by yourself. I'ver used your fiddle to fire dragend event and use new constructors.

var fnMousemove = function (oEvent) {
    var iTopDiff = Math.abs(oEvent.pageY - mStartPos.top);
    var iLeftDiff = Math.abs(oEvent.pageX - mStartPos.left);
    if (iTopDiff > 50 || iLeftDiff > 50) {
        document.removeEventListener("mousemove", fnMousemove);
        oDraggable.setAttribute("draggable", true);
        oDraggable.addEventListener("dragstart", fnDragstart);
        oDraggable.addEventListener("drag", fnDrag);
        oDraggable.addEventListener("dragend", fnDragend);

        // Fire a dragstart event, now that we know what to do with it
        var e = new DragEvent("dragstart", {"dataTransfer": dataTransfer}); //$NON-NLS-1$
        oDraggable.dispatchEvent(e);
    }
};

var fnMouseup = function (oEvent) {
    document.removeEventListener("mousemove", fnMousemove);
    var e = new DragEvent("dragend", {"dataTransfer": dataTransfer}); //$NON-NLS-1$
        oDraggable.dispatchEvent(e);

};

JSFiddle: http://jsfiddle.net/p0391zhv/