小さなプロジェクトでは、「OWLカルーセル」jQueryプラグイン（http://www.owlgraphic.com/owlcarousel/）を使用しています。
このプラグインを介してドラッグ可能な小さなスクリプトを作成します。特定の要素（アイテム）のドラッグを無効にしたいのですが、その方法がわかりません。
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",
});
});
コールバック関数でmouseDrag（http://www.owlgraphic.com/owlcarousel/#customizing）を使用する必要があることはわかっていますが、今は方法がわかりません... :(
私は同じ問題を抱えていて、それを理解しました：
無効にするアイテムにクラスを追加し（つまり、「disable-owl-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();
})
お役に立てば幸いです。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加