8

我目前正在为 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...）。

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

提前致谢！

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

4

2 回答 2

0

正如 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/

于 2019-08-26T06:30:01.900 回答
0

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

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

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

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

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

于 2016-02-28T00:35:59.797 回答