可拖动元素在另一个可拖动元素中

这里的小提琴更不用说我想做的事了： http ： //jsfiddle.net/EUZS5/2/ 。

我在swiper中有不同的元素，在一些幻灯片里面有一个可拖动的元素。

目前，当我拖动箭头时，它也会拉动幻灯片（这不是我想要的行为:)）

我试图在拖动事件上使用’stopPropagation’，但它无助于阻止幻灯片移动。

任何想法如何实现这一目标？ 我使用hammerjs和idangerous.swiper。

$(document).ready(function(){ var mySwiper = new Swiper('.swiper-container',{ pagination: '.pagination', paginationClickable: true }) var left; $('.arrow').hammer({}).on("dragstart", function(ev) { left = $(this).css('left').replace(/[^-\d\.]/g, ''); }) $('.arrow').hammer({}).on("dragright", function(ev) { var distance = parseFloat(left)+parseFloat(ev.gesture.deltaX); $(this).css('left', distance+'px'); }) $('.arrow').hammer({}).on("dragleft", function(ev) { var distance = parseFloat(left)+parseFloat(ev.gesture.deltaX); $(this).css('left', distance+'px'); }) }); 

Answer 1

您可以通过向idangerous swiper添加一些“禁用滑动”设置，然后在拖动箭头时添加该类来实现此目的。

在这里小提琴： http ： //jsfiddle.net/cspurgeon/EUZS5/3/

新的iDangerous设置：

 var mySwiper = new Swiper('.swiper-container',{ pagination: '.pagination', paginationClickable: true, noSwiping: true, noSwipingClass: 'no-swiping' }) 

箭头mousedown的相关事件监听器，并拖动。

 $('.arrow').on('mousedown', function(e) { // disable swiper when user clicks on arrow $(this).parents('.swiper-wrapper').addClass('no-swiping'); }); $('.arrow').on('mouseup dragend', function(e) { // re-enable when user is done $(this).parents('.swiper-wrapper').removeClass('no-swiping'); }); 

注意：您需要dragend，因为当用户释放鼠标时，鼠标并不总是在箭头上方。 但是你不能使用dragstart，因为它似乎在触发滑动事件后触发。

iDangerous noSwiping文档： http ： //www.idangero.us/sliders/swiper/api.php