是否可以以编程方式触发拖动事件?

时间:2014-05-16 21:54:07

标签: javascript html5 drag-and-drop

我目前正在使用库Draggabilly向我的应用添加拖放功能。我尝试做的是触发CKEditor实例上的drop事件(HTML5本机事件),然后执行任务。这是我到目前为止所知道的:

  1. CKEditor只会收听dragover等本机HTML5事件 和drop
  2. Dragabilly不会触发本机dragdrop事件。相反,它使用mousedownmouseup
  3. 我的问题是,有没有办法使用dispatchEvent或类似方法来模拟dragstartdragdrop事件?

    除了我提到的问题之外,如果有更好的方法解决这个问题,请告诉我。

    感谢。

1 个答案:

答案 0 :(得分:4)

我已根据stackoverflow中的一些代码为此完成了一项功能,我也读过了 在MDN中,我正在使用该对象的表单已弃用,但它对我有用,我将在未来纠正,但现在这可以帮助您

function fireCustomEvent(eventName, element, data) {
    'use strict';
    var event;
    data = data || {};
    if (document.createEvent) {
        event = document.createEvent("HTMLEvents");
        event.initEvent(eventName, true, true);
    } else {
        event = document.createEventObject();
        event.eventType = eventName;
    }

    event.eventName = eventName;
    event = $.extend(event, data);

    if (document.createEvent) {
        element.dispatchEvent(event);
    } else {
        element.fireEvent("on" + event.eventType, event);
    }
}

以及如何将其用于您要求的事件

    fireCustomEvent('dragover', someDomObject);
    fireCustomEvent('drop', someDomObject, {dataTransfer: {files: [mockedfile]}});
    fireCustomEvent('dragend', someDomObject);