我正在尝试制作一个 CKEditor 小部件，其中包含监听 dragstart drag 和 dragend 事件的子项。问题是这些事件永远不会被触发——就像 .cke_widget_wrapper(包装小部件的 div)取消了这些事件。
请注意，我并不是要使整个小部件都可拖动(小部件功能的一部分)，而是要使小部件内的元素可拖动。
如果我打开 .cke_widget_wrapper 的子项(从而移除包装)，那么一切都会按预期进行。但似乎这个 wrapper 阻止了 children 拖拽。
我不会发布有关我如何进行拖动的代码，因为它在一个孤立的测试用例中按预期工作，并且如前所述，当我从 .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 元素上正常运行？
谢谢
最佳答案
像往常一样，只要我向 SO 发布问题，我就会得出答案。
CKEditor 将 mousedown 事件附加到可编辑区域，它可以做很多事情，但似乎副作用之一是它阻止了小部件内容的拖动。
我所要做的就是将 mousedown 事件处理程序附加到调用 event.stopPropagation 的 .resize 元素，如下所示:
element.on('mousedown', function(e) {
e.stopPropagation();
});
简单!
关于javascript - 具有可拖动内容的 CKEditor 4 小部件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34669591/