使用owl carousel和Jquery UI进行可拖动事件

Question

我在使用与Jquery UI混合的Owl轮播时遇到了一些问题。

轮播用于显示具有各种内容的幻灯片（Html表单和图片上传器。）

其中一张幻灯片包含上传器，可动态上传用户图片，并显示此图片的缩略图。

其中一个问题是，此内容是动态的，上传后，幻灯片不会改变高度，因此用户无法看到此缩略图。

但我这样做是使用：

setInterval(function(){
                $(".owl-carousel").each(function(){
                    $(this).data('owlCarousel').updateVars();
                });
            },3000)

所以每3秒脚本更新一次。

但是现在，我有问题：用户可以选择拖动此缩略图，这样他就可以更改图像的顺序，以便在图库中显示。我已经为此目的使用了Jquery UI和可拖动的效果。

但这不起作用，因为猫头鹰旋转木马不允许拖动物品。我的代码很简单，我有owl carousel的通用函数：

$(document).ready(function () {
    $(".owl-carousel").owlCarousel({
        navigation: true, // Show next and prev buttons
        slideSpeed: 300,
        paginationSpeed: 400,
        singleItem: true,
        autoHeight:true,

});

对于影片，内部幻​​灯片（包含缩略图）：

$( "li" ).draggable({
});

现在，上面的代码将允许拖动owl轮播之外的任何<li>元素，但不能拖动我的缩略图。

Html代码非常简单，只是为了解决这个问题：

<div class="owl-carousel">

<div class="item">
  <p>text</p>
</div>

<div class="item">
  <p>text</p>
</div>

<div class="item thumbs">
<ul>
  <li>here i have thumbnail</li>
</ul>

我需要注意的是，它可以帮助我，如果我可以禁用猫头鹰旋转木马滑动效果，并且只允许通过使用导航（附件）来更改幻灯片 - 它也可能是好的，因为缩略图拖动是最重要的。 ... （红色区域可能被禁用，因此没有左/右滑动，幻灯片仅通过绿色按钮更改，图像可拖动。）

感谢您的建议。

Answer 1

你可以设置mouseDrag：false。猫头鹰 - 旋转木马。它将禁用自拖动并启用本机拖动。