javascript - 是否可以通过编程方式触发拖动事件?

标签 javascript html drag-and-drop

我目前正在使用图书馆 Draggabilly为我的应用程序添加拖放功能。我想要做的是触发 CKEditor 实例上的 drop 事件(HTML5 原生事件),然后执行任务。到目前为止,这是我发现的:

  1. CKEditor 只会监听原生的 HTML5 事件,比如 dragoverdrop
  2. Dragabilly 不会触发原生的dragdrop 事件。相反,它使用 mousedownmouseup

我的问题是,有没有办法使用 dispatchEvent 或一些类似的方法来模拟 dragstartdragdrop 事件?

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

谢谢。

最佳答案

基于 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);

关于javascript - 是否可以通过编程方式触发拖动事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23705136/

相关文章:

javascript - 使用 jQuery 滚动 div

javascript - 为什么以及何时在 React js 中使用 componentDidMount?

javascript - 第 n 个 child 不在体内工作

C# 从列表框拖放到 TreeView

c# - 在 wpf 中拖放路径

javascript - 淡出元素然后淡入所选

html - Bootstrap 媒体对象未加载图像

javascript - 我的 jquery 脚本从不执行,我认为这是类选择器的问题

Java - 如何将文件拖放到 JTextArea 上

javascript - chrome...addListener,如何等待 chrome.storage.sync.get?