禁用在“猫头鹰传送带”中的特定元素（Item） - jQuery的拖动 [英] disable dragging in specific element (Item) in “Owl carousel” - jquery

问题描述

我使用OWL CarouseljQuery插件（ http://www.owlgraphic.com/owlcarousel/）for我的小项目。

我创建了一个可通过此插件拖动的小脚本。现在我想禁用拖动特定元素（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>项目-3.2不可拖动< 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; 
 
 $ b  

JS：

  $（document）.ready（function（）{
 
 $（＃carousel）。owlCarousel（ {
 singleItem：true，
 startPosition：-1，
 autoPlayDirection：rtl，
 
}）; 
 
}）; 
  

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

）

解决方案

我有同样的问题，只是想出了它： / p>

为要禁用的项目添加一个类（即disable-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：

 < $（）。code $（。disable-owl-swipe）。on（touchstart mousedown，function（e）{
 //防止传送带滑动
 e.stopPropagation（）; 
 $ b）
  

希望有帮助！

I use "OWL Carousel" jQuery plugin (http://www.owlgraphic.com/owlcarousel/) for in my small project.

I create small script that draggable via this plugin. now i want to disable dragging in specific element (Item)... but i don't know how to do that.

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",

    });

});

I know I should use to mouseDrag (http://www.owlgraphic.com/owlcarousel/#customizing) in a callback function , but i don't now how ... :(

解决方案

I had the same problem and just figured it out:

Add a class to the items you want to disable (i.e. "disable-owl-swipe") and stop event propagation on touchstart and mousedown, so the parents (the owl carousel wrappers) don't receive the event and therefore don't swipe.

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

Hope that helps!

这篇关于禁用在“猫头鹰传送带”中的特定元素（Item） - jQuery的拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！