CKEditor 4 Widget with Draggable contents

Question

Я пытаюсь создать виджет CKEditor с детьми, которые прослушивают события dragstartdrag и 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 элемент, который вызывает event.stopPropagation, например, так:

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

Легко!