我正试图用Froala编辑器实现一些定制的drop事件功能。这里有一个关于codepen的非常基本的示例：拖放示例

问题是，这不起作用-我不能得到自定义的FroalaEditor.drop函数来启动，我确信我需要添加某种防止默认的地方HTML5下降事件，但我所尝试的一切要么杀死所有删除功能或什么都不做。自定义函数看起来像这样：

$('div#froala-editor').froalaEditor({
  toolbarButtons: ['bold', 'italic', 'underline', 'insertImage', 'insertLink', 'emoticons', 'undo', 'redo'],
  pluginsEnabled: ['image', 'link', 'draggable', 'emoticons']
})
.on ('froalaEditor.drop', function (e, editor, dropEvent) {
//// do stuff - nothing is firing

我通过标准使其可拖动：

draggable="true"

任何与此相关的帮助或建议都将不胜感激！

谢谢，

马克

UPDATE::：

这是我的JS：

$(function() {
// For Firefox to work.
$("#drag-smile, #drag-text").on("dragstart", function(e) {
    e.originalEvent.dataTransfer.setData("Text", this.id);
});

$("div#froala-editor")
    .froalaEditor({
        toolbarButtons: [
            "bold",
            "italic",
            "underline",
            "insertImage",
            "insertLink",
            "emoticons",
            "undo",
            "redo"
        ],
        pluginsEnabled: ["image", "link", "draggable", "emoticons"]
    })
    .on("froalaEditor.drop", function(e, editor, dropEvent) {
        // Focus at the current posisiton.
        editor.markers.insertAtPoint(dropEvent.originalEvent);
        var $marker = editor.$el.find(".fr-marker");
        $marker.replaceWith($.FroalaEditor.MARKERS);
        editor.selection.restore();

        // Save into undo stack the current position.
        if (!editor.undo.canDo()) editor.undo.saveStep();

        // Insert HTML.
        if (dropEvent.originalEvent.dataTransfer.getData("Text") == "drag-smile") {
            editor.html.insert(
                '<span class="fr-emoticon fr-emoticon-img" style="background: url(https://cdnjs.cloudflare.com/ajax/libs/emojione/2.0.1/assets/svg/1f600.svg)">&nbsp;</span>'
            );
        } else {
            editor.html.insert("Hello!");
        }

        // Save into undo stack the changes.
        editor.undo.saveStep();

        // Stop event propagation.
        dropEvent.preventDefault();
        dropEvent.stopPropagation();
        return false;
    });
   });

我的超文本标记语言：

   <div id="drag-smile" style="border: solid 1px #CCC; padding: 5px; width: 300px;" draggable="true"><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.0.1/assets/svg/1f600.svg" width="32" /> Drag Me to insert a smile.</div><br/>
<div id="drag-text" style="border: solid 1px #CCC; padding: 5px; width: 300px;" draggable="true">Drag Me to insert some text.</div><br/>
<div id="froala-editor">
<h3>Click here to edit the content</h3>
<p>The image can be dragged only between blocks and not inside them.
</p>
</div>

实际上，当您将其中一个可拖动的div拖动到编辑器中时，应该将自定义html注入编辑器，但它只是将divs id添加为文本。