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

时间:2014-02-17 18:10:28

标签: javascript html5 drag-and-drop html5-draggable

我正在努力克服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被正确触发,但没有其他拖拽事件(dragdragend ......)。 / p>

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

提前致谢!

您可以找到一个简单的运行示例here

2 个答案:

答案 0 :(得分:0)

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

因此,如果您自己解雇 dragstart 事件,那么您自己也必须实施其余的流程。

为了解决您的问题,我建议您按如下方式创建用户体验:

  1. 指示用户单击相应区域以启用拖动
  2. 用户点击该区域后,显示反馈以指示现在可以使用拖动。
  3. 它只是意味着您应该寻找的是如何根据拖放API的当前状态改善用户体验。

答案 1 :(得分: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/