jQuery owlCarousel 拖放 Firefox 问题

Question

我已经使用 owlCarousel 2 to display images and have tinymce 4 作为 WYSIWIG 编辑器。

当我在 FireFox 41.0.2 中将图像从轮播拖到 tinyMCE WYSIWIG 编辑器时，我遇到了一个奇怪的问题。它不只是删除图像，而是复制 div 包含图像的旋转木马。

这里是owl配置

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 在拖放后的 TinyMCE WYSIWIG 中

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>

在 firefox 中查看 http://fiddle.tinymce.com/Cifaab/2 以获得更多信息。

注意：我没有在轮播图片标签上设置 draggable = 'true' 但是即使将 draggable 设置为 true。有什么建议吗？

Answer 1

初始化tinyMCE时添加如下配置

invalid_elements: "div"

在这里您需要指定在 tinyMCE 中拖放图像时要忽略的所有元素。有关详细信息，请查看文档 here

jQuery owlCarousel 拖放 Firefox 问题

jQuery owlCarousel drag and drop Firefox issue

html

jquery

drag-and-drop

tinymce-4

owl-carousel-2