Question

我试图制作一个CKEditor小部件，其中包含可以收听dragstart drag和dragend个事件的孩子。问题是这些事件永远不会被解雇 - 它就像.cke_widget_wrapper（包装小部件的div）取消了这些事件。

请注意，我并没有尝试使整个小部件可拖动（小部件功能的一部分），而是使小部件中的元素可拖动。

如果我打开.cke_widget_wrapper的子项（从而删除包装器），那么一切都按预期工作。但似乎这个包装器阻止了孩子们拖延。

我不会发布关于我如何进行拖动的代码，因为它在隔离的测试用例中按预期工作，并且正如所解释的那样，当我从.cke_widget_wrapper打开窗口小部件时起作用。

以下是我创建窗口小部件的方法：

CKEDITOR.plugins.add('embed', {
    init: function(editor) {
        editor.widgets.add('gallery', {
            init: function() {
                // code here that generates the HTML
            },
            upcast: function(element) {
                // Defines which elements will become widgets.
                if (element.hasClass('gallery')) {
                    return true;
                }
            },
            downcast: function(element) {
                element.setHtml("");
            },
            draggable: false, // This does not make a difference, but I set it to false because I don't want to use the built in widget dragging functionality
            template: "<div class="gallery" trix-id='{id}'></div>",
            defaults: function() {
                return {id: 1} // As an example
            }
        });
    }
});

这是生成的HTML：

<div tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1" data-cke-filter="off" class="cke_widget_wrapper cke_widget_block cke_widget_selected" data-cke-display-name="gallery" data-cke-widget-id="0">
    <div class="gallery cke_widget_element" trix-id="1" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="gallery">
        <!-- Other HTML -->
        <div class="resize" draggable="true" trix-gallery-resize="1"></div>
    </div>
</div>

div.resize元素附加了事件处理程序以允许拖动。如上所述，这是在一个独立的测试用例中，当我删除.cke_widget_wrapper包装器时。

有没有人知道我如何允许在窗口小部件中拖动，以便事件处理程序在.resize元素上正常运行？

由于

Answer 1

像往常一样，只要我向SO发布一个问题，我就会找到答案。

CKEditor将mousedown事件附加到可编辑区域，该区域执行许多操作，但似乎其中一个副作用是阻止窗口小部件内容被拖动。

我所要做的就是将mousedown事件处理程序附加到调用.resize的{{1}}元素，如下所示：

event.stopPropagation

容易！

带有可拖动内容的CKEditor 4小部件

1 个答案: