Draggable element inside another draggable element

问题

Here in the fiddle is more less what i want to do: http://jsfiddle.net/EUZS5/2/ .

I have different elements in a swiper and in some slides inside there is a draggable element.

Currently when i drag the arrow it also pulls the slide (which is not the behaviour i want:))

I tried to use 'stopPropagation' on drag event but it does not help to prevent the slide from moving.

Any ideas how to achieve this? Im using hammerjs and 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');

            })
                            });

回答1:

You can do this by adding some 'no-swiping' settings to idangerous swiper, and then adding that class when the arrow is dragged.

Fiddle here: http://jsfiddle.net/cspurgeon/EUZS5/3/

New iDangerous settings:

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

Relevant event listeners for arrow mousedown, and drag.

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

Note: you need the dragend because the mouse isn't always over the arrow when the user releases it. But you can't use dragstart because it appears to fire after the swipe event is triggered.

iDangerous noSwiping documentation here: http://www.idangero.us/sliders/swiper/api.php

来源：https://stackoverflow.com/questions/23893643/draggable-element-inside-another-draggable-element

标签

javascript

jquery

html5

draggable