在mousemove之后以编程方式触发HTML5 dragstart

Question

我正在努力克服HTML5拖延,因为我想要实现特定的东西.

我有一个可以使用HTML5 API拖动的div,但我只想让用户真正意味着拖动(因为它之后会触发一些更多的处理程序).

这就是为什么我dragstart在满足某个条件时触发的原因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);
    }
};

但是正如你已经可以猜到的那样,在dragstart正确触发的情况下,这不起作用,但没有其他拖拽事件(drag,dragend...).

有什么我在那里没有妥善处理？或者你能看到一个解决方法来从mousemove处理程序启动浏览器的拖放吗？(按下鼠标按钮)

提前致谢!

你可以在这里找到一个简单的运行示例

Answer 1

看来通常触发Dragstart 的机制会预测通常在Dragstart 之后发生的其他事件并相应地触发它们。

因此，如果您自己触发Dragstart事件，那么您还必须自己实现流程的其余部分。

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

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

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