禁用拖动“Owl carousel”中的特定元素（Item） – jquery

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

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

HTML：

 
 
 
Item-1.1
 
Item-1.2 NOT Draggble
 
Item-1.3
 
 
 
Item-2.1
 
Item-2.2 NOT Draggble
 
Item-2.3
 
 
 
Item-3.1
 
Item-3.2 NOT Draggble
 
Item-3.3
 
 
  

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

我有同样的问题，只是想出来：

将类添加到要禁用的项目（即“disable-owl-swipe”）并在touchstart和mousedown上停止事件传播，因此父项（owl carousel wrappers）不会收到事件，因此不会刷卡。

HTML：

 
 
 
 
Item-1.1
 
Item-1.2 NOT Draggble
 
Item-1.3
 
 
 
Item-2.1
 
Item-2.2 NOT Draggble
 
Item-2.3
 
 
 
Item-3.1
 
Item-3.2 NOT Draggble
 
Item-3.3
 
 
  

JS：

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

希望有所帮助！

Answer 2

我有解决方案！

只需在“ NDElement ”中添加要排除的元素

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