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

Question

我目前正在使用库Draggabilly 向我的应用程序添加拖放功能。我想要做的是在 CKEditor 的一个实例上触发 drop 事件（HTML5 原生事件），然后执行一项任务。到目前为止，这是我想出的：

1. CKEditor 只会监听原生 HTML5 事件，例如 dragover 和drop。
2. Dragabilly 不会触发原生 drag 和 drop 事件。相反，它使用mousedown 和mouseup。

我的问题是，有没有办法使用dispatchEvent 或类似的方法来模拟dragstart、drag 和drop 事件？

如果有比我提到的更好的解决方案，请告诉我。

谢谢。

Answer 1

我已经为此做了一个函数，基于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);