2

我正在尝试制作一个 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元素上正常运行？

谢谢

4

1 回答 1

1

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

CKEditor 将一个mousedown事件附加到可编辑区域，它可以做很多事情，但似乎其中一个副作用是它阻止了小部件内容可拖动。

我所要做的就是将一个mousedown事件处理程序附加到.resize调用 的元素上event.stopPropagation，如下所示：

element.on('mousedown', function(e) {
    e.stopPropagation();
});

简单的！

于 2016-01-08T04:50:07.957 回答