mousemove 后以编程方式触发 HTML5 dragstart答案

【问题标题】：Programmatically fire HTML5 dragstart after mousemovemousemove 后以编程方式触发 HTML5 dragstart
【发布时间】：2014-03-17 04:13:24
【问题描述】：

我目前正在为 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...）的意义上不起作用。

那里有什么我没有妥善处理的吗？或者你能看到从鼠标移动处理程序启动浏览器拖放的解决方法吗？（按住鼠标按钮）

提前致谢！

你可以找到一个简单的运行例子here

【问题讨论】：

标签： javascript html drag-and-drop html5-draggable

【解决方案1】：

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

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

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

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

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

【讨论】：

我明白你的意思，但我的问题更多是关于触发原生 DnD 的技术可行性。至于 UX，使用 mousemove 的自定义实现是完全有效的，我认为不需要更麻烦的东西。（除了DnD会被限制在页面内，不会携带到浏览器之外）

【解决方案2】：

正如 igwe-kalu 所说，您必须自己实现拖动事件。我用你的小提琴来触发 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/

【讨论】：