Question

我在我的小项目中使用“OWL Carousel”jQuery插件（http://www.owlgraphic.com/owlcarousel/）。

我创建了可通过此插件拖动的小脚本。现在我想禁用特定元素（Item）中的拖动...但我不知道该怎么做。

HTML：

<div class="wrap">
    <div id="carousel">

    <div class="part">
        <div class="item">Item-1.1</div>
        <div class="item">Item-1.2 NOT Draggble</div>
        <div class="item">Item-1.3</div>
    </div>
    <div class="part">
        <div class="item">Item-2.1</div>
        <div class="item">Item-2.2 NOT Draggble</div>
        <div class="item">Item-2.3</div>
    </div>
    <div class="part">
        <div class="item">Item-3.1</div>
        <div class="item">Item-3.2 NOT Draggble<div>
        <div class="item">Item-3.3</div>
    </div>

    </div>
</div>

CSS：

div.wrap {
    width: 990px;
    min-height: 360px;
    padding: 5px;
    border: 2px solid #666;
    margin: 10px auto;
}
div.item {
    float: left;
    border: 1px solid #ddd;
    width: 324px;
    margin: 1px;
    min-height: 360px; 

}

JS：

$(document).ready(function() {

    $("#carousel").owlCarousel({
        singleItem: true,
    startPosition : -1,
    autoPlayDirection : "rtl",

    });

});

我知道我应该在回调函数中使用 mouseDrag （http://www.owlgraphic.com/owlcarousel/#customizing），但我现在不知道如何...... :(

Answer 1

我遇到了同样的问题并且弄清楚了：

在要禁用的项目中添加一个类（即“禁用owl-swipe”）并在touchstart和mousedown上停止事件传播，因此父母（猫头鹰旋转木马包装器）不会收到该事件，因此不要不要轻扫。

HTML：

<div class="wrap">
    <div id="carousel">

    <div class="part">
        <div class="item">Item-1.1</div>
        <div class="item disable-owl-swipe">Item-1.2 NOT Draggble</div>
        <div class="item">Item-1.3</div>
    </div>
    <div class="part">
        <div class="item">Item-2.1</div>
        <div class="item disable-owl-swipe">Item-2.2 NOT Draggble</div>
        <div class="item">Item-2.3</div>
    </div>
    <div class="part">
        <div class="item">Item-3.1</div>
        <div class="item disable-owl-swipe">Item-3.2 NOT Draggble<div>
        <div class="item">Item-3.3</div>
    </div>

    </div>
</div>

JS：

$(".disable-owl-swipe").on("touchstart mousedown", function(e) {
    // Prevent carousel swipe
    e.stopPropagation();
})

希望有所帮助！

Answer 2

我有解决方案！

只需添加要排除的元素＆＃34; NDElement ＆＃34;

$( NDElement ).mousedown(function() {
        $(".owl-wrapper").attr("class","dontdragg"); 
});
$( document ).mouseup(function() {
        $(".dontdragg").attr("class","owl-wrapper"); 
});

禁用在“猫头鹰轮播”中的特定元素（项目）中拖动 - jquery

2 个答案: