另一个可拖动的元素中拖动元素(Draggable element inside another dr

在这里，在小提琴更是少了什么我想做的事： http://jsfiddle.net/EUZS5/2/ 。

我有一个刷卡不同的元素，并且在一些幻灯片内部有一个可拖动的元件。

目前，当我拖动箭头也拉动滑块（这不是我想要的行为:)）

我试图用“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');

            })
                            });

您可以通过添加一些“不刷卡”设置idangerous刷卡，然后加入该类箭头拖动时做到这一点。

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

新iDangerous设置：

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

有关事件侦听器鼠标按下箭头，然后拖动。

$('.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