程序化地在mousemove之后触发HTML5 dragstart

Question

我目前在处理HTML5拖放时遇到了困难，因为我想实现特定的功能。

我有一个可以使用HTML5 API进行拖动的div，但我只希望在用户真正需要拖动时才触发拖动（因为之后会触发一些其他的处理程序）。

这就是为什么当从mousemove中满足某个条件时，我会触发dragstart。

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);
    }
};

但是，正如你已经猜到的那样，这种方法并没有起作用，因为`dragstart`事件确实被正确触发了，但没有其他拖动事件（`drag`、`dragend`...）。

我是否没有正确处理呢？或者您能否看到从mousemove处理程序启动浏览器的拖放的解决方法？（鼠标按钮被按住）

谢谢！您可以在这里找到一个简单的运行示例。

- Vinky

Answer 1

看起来通常触发dragstart的机制会预期其他通常跟随dragstart的事件并相应地触发它们。

因此，如果您通过自己触发dragstart事件，则必须自己实现其余的流程。

为了特别解决您的问题，我建议您按以下方式创建用户体验：

1. 指示用户单击相应区域以启用拖放
2. 在用户单击该区域后，显示反馈以指示现在可以使用拖放。

这意味着您应该根据当前拖放API的状态来寻找如何改进用户体验。

- Igwe Kalu

---

我理解你的观点，但我的问题更多关于触发本地DnD的技术可行性。 至于用户体验，使用mousemove进行自定义实现是完全有效的，我不认为需要更繁琐的东西。 （除非DnD将被限制在页面上，并且不会超出浏览器范围） - Vinky

Answer 2

正如igwe-kalu所说，你必须自己实现拖动事件。我已经使用了你的fiddle来触发dragend事件并使用新构造函数。

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/

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

- MCMicS