jQuery owlCarousel drag and drop Firefox issue

Question

I have used owlCarousel 2 to display images and have tinymce 4 as WYSIWIG editor.

I am facing strange issue when I drag image from carousel to tinyMCE WYSIWIG editor in FireFox 41.0.2. Instead of just dropping image, it copies div of carousel within which image is enclosed.

Here is owl configuration

var owl = $("#extracted-images");
owl.owlCarousel({
  items : 4, //10 items above 1000px browser width
  itemsDesktop : [1000,5], //5 items between 1000px and 901px
  itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
  itemsTablet: [600,2], //2 items between 600 and 0;
  itemsMobile : false, // itemsMobile disabled - inherit from itemsTablet option
  touchDrag : false,
  mouseDrag : false,
});

HTML in TinyMCE WYSIWIG after drag and drop

Chrome

<p><img src="http://127.0.1.1/wp-content/uploads/2015/10/SXSW-0033.jpg" alt="Sxsw 0033"></p>

Firefox

<div style="width: 137px;" class="owl-item">
  <div class="item">
    <div class="image-list-box">
       <div class="doc-img-box">
        <img alt="Sxsw 0033" src="http://127.0.1.1/wp-content/uploads/2015/10/SXSW-0033.jpg">
       </div>
     </div>
  </div>
</div>

Check http://fiddle.tinymce.com/Cifaab/2 in firefox to get more idea.

NOTE: I have not set draggable = 'true' on carousel image tags But it doesn't change the result even after setting draggable it to true. Any suggestions?

Answer 1

Add following configuration when initializing tinyMCE.

invalid_elements: "div"

Here you need to specifies all the elements which you want to ignore while dropping image in tinyMCE. For more details check documentation here