Question

这里的小提琴更不用说我想做的事了：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

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

1 个答案: