javascript 禁止在“猫头鹰轮播”中的特定元素（项目）中拖动 - jquery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22909399/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
disable dragging in specific element (Item) in “Owl carousel” - jquery
提问by Mohsen Rasouli
I use "OWL Carousel" jQuery plugin (http://www.owlgraphic.com/owlcarousel/) for in my small project.
我在我的小项目中使用“OWL Carousel”jQuery 插件（http://www.owlgraphic.com/owlcarousel/）。
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:
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:
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:
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 ... :(
我知道我应该在回调函数中使用mouseDrag( http://www.owlgraphic.com/owlcarousel/#customizing) ，但我现在不知道如何...... :(
回答by heather
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.
向要禁用的项目添加一个类（即“禁用-owl-swipe”）并在 touchstart 和 mousedown 上停止事件传播，因此父级（owl carousel 包装器）不会收到该事件，因此不会滑动.
HTML:
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:
JS：
$(".disable-owl-swipe").on("touchstart mousedown", function(e) {
// Prevent carousel swipe
e.stopPropagation();
})
Hope that helps!
希望有帮助！
回答by Eduardo Alfredo Hopperdietzel
I have the solution!
Just add the elements you want to exclude in "NDElement"
我有解决方案！
只需在“ NDElement”中添加要排除的元素
$( NDElement ).mousedown(function() {
$(".owl-wrapper").attr("class","dontdragg");
});
$( document ).mouseup(function() {
$(".dontdragg").attr("class","owl-wrapper");
});
