disable dragging in specific element (Item) in “Owl carousel” - jquery

Question

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 wa

Answer 1

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!

Answer 2

I have the solution!

Just add the elements you want to exclude in "NDElement"

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