jQuery owlCarousel 拖放 Firefox 问题答案

【问题标题】：jQuery owlCarousel drag and drop Firefox issuejQuery owlCarousel 拖放 Firefox 问题
【发布时间】：2015-11-05 12:37:48
【问题描述】：

我使用owlCarousel 2 显示图像并使用tinymce 4 作为所见即所得编辑器。

当我将图像从轮播拖到 FireFox 41.0.2 中的 tinyMCE WYSIWIG 编辑器时，我遇到了奇怪的问题。它不只是丢弃图像，而是复制包含图像的轮播的 div。

这是猫头鹰的配置

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,
});

拖放后在 TinyMCE WYSIWIG 中的 HTML

Chrome

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

火狐

<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，它也不会改变结果。有什么建议吗？

【问题讨论】：

标签： jquery html drag-and-drop tinymce-4 owl-carousel-2

【解决方案1】：

在初始化tinyMCE时添加如下配置。

invalid_elements: "div"

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

【讨论】：