wyłącza przeciąganie w określonym elemencie (Item) w "Karuzeli sowy" - jquery

Question

Używam wtyczki jQuery "OWL Carousel" (http://www.owlgraphic.com/owlcarousel/) w moim małym projekcie.

Tworzę mały skrypt, który można przeciągnąć za pomocą tej wtyczki. teraz chcę wyłączyć przeciąganie w określonym elemencie (Item) ... ale nie wiem jak to zrobić.

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

    }); 

}); 

Wiem, że powinienem użyć do mouseDrag (http://www.owlgraphic.com/owlcarousel/#customizing) w funkcji zwrotnej, ale nie teraz, jak ... :(

Answer 1

miałem ten sam problem i tylko zorientowaliśmy się:

Dodaj klasę przedmiotów chcesz wyłączyć (np "disable-owl-swipe") i zatrzymaj propagację zdarzeń na touchstart i mousedown, więc rodzice (owijacze karuzeli owl) nie otrzymują tego zdarzenia i dlatego nie machnięcia.

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

nadzieję, że pomoże!

Answer 2

Mam rozwiązanie!

Wystarczy dodać elementy, które chcesz wykluczyć w „ NDElement”

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