另一个可拖动元素内的可拖动元素 [英] Draggable element inside another draggable element

问题描述

在小提琴中的位置比我想做的要少得多: http://jsfiddle.net/EUZS5/2/.

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:))

我试图在拖动事件上使用'stopPropagation'，但这无助于防止幻灯片移动.

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

任何想法如何实现这一目标? 我正在使用Hammerjs和idangerous.swiper.

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');

            })
                            });

推荐答案

您可以通过向危险的滑动器添加一些禁止滑动"设置，然后在拖动箭头时添加该类来做到这一点.

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

在这里拨弄: http://jsfiddle.net/cspurgeon/EUZS5/3/

新的iDangerous设置:

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

注意:您需要用到拖尾，因为当用户释放鼠标时，鼠标并不总是在箭头上方.但是您不能使用dragstart，因为它会在触发滑动事件后触发.

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文档: http://www.idangero.us/sliders/swiper/api.php

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

这篇关于另一个可拖动元素内的可拖动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！