使用 jQuery 嵌套拖动、滑动

Question

以下代码用于嵌套 swiping/dragging，parent 和 child 都是可拖动的。

P1... 它运行良好但有一个可爱的问题，如果我们单独拖动 parent 它会完美运行。但是当我们拖动 draggable child 时 parent 也会被自动拖动... Jsbin for P1...

P1...是由“.closest('.'+ mainElem[0].className)”引起的；如果我删除它，那么 parent 在拖动 child 时不会被拖动，''''产生另一个问题。

........也就是........

P2... 如果我们点击任何 non-draggable child 假设文本，然后 可拖动parent不动。 ...并且...如果我们单击 tri-line menu-button 然后它会被拖动而不是它的 可拖动 parent... Jsbin for P2...

$.fn.on_swipe = function(o) {

    var te = {};

    this.each(function(){

        var mainElem = $(this);

        $(document).on('mousedown', function(e) {

          e.preventDefault();

            te.target = $(e.target).closest('.'+ mainElem[0].className);
            te.bX = e.pageX;
            te.lastX = te.target.position().left;

            $(this).on('mousemove', function(e) {

                te.eX = e.pageX;
                te.posX = te.lastX + ( -1 * (te.bX - te.eX));
                o.moving(te.target, te.posX);

            }).on('mouseup', function(e) {
                te = {};
                $(this).unbind('mousemove');
                $(this).unbind('mouseup');
            });
        });
    });
};

$('.parent').on_swipe( { moving: function(target, posX) { 
        target.css( 'left' , posX + 'px'); 
    } });

$('.child').on_swipe( { moving: function(target, posX) { 
        target.css( 'left' , posX + 'px'); 
    } });

谢谢:)

Answer 1

解决了您的 P1... 和 P2.. 问题

1) 将您的 "mousedown" 单击从文档更改为实际元素的初始化。

2) 添加了 "stopPropagation()" 在拖动子项时不拖动父项

3) 从初始化的元素中删除了 "mouseup" 事件并将其添加到文档中

已更新jsbin P1

如果您有任何其他问题，请告诉我

更新：根据评论中@kanudo 的要求添加 jsbin

更新：最终更正 ..JSBIN..

Answer 2

HURRAY，这是完美的解决方案，但在 e.stopPropagation() 的帮助下； @Kushal

的回答引起了人们的注意

这是正确的答案：...Jsbin... 完美工作的已解决答案...

$.fn.on_swipe = function(o) {

    var te = {};

    this.each(function(){

        var mainElem = $(this);

        /* used 'mainElem' instead of $(document) */
        mainElem.on('mousedown', function(e) {

          e.preventDefault();
          e.stopPropagation(); /* added to stop bubbling event to parent */

            te.target = $(e.target).closest('.'+ mainElem[0].className);
            te.bX = e.pageX;
            te.lastX = te.target.position().left;

            /* used $(document) instead of $(this) */
            $(document).on('mousemove', function(e) {

                te.eX = e.pageX;
                te.posX = te.lastX + ( -1 * (te.bX - te.eX));
                o.moving(te.target, te.posX);

            }).on('mouseup', function(e) {
                te = {};
                $(this).unbind('mousemove');
                $(this).unbind('mouseup');
            });
        });
    });
};

$('.parent').on_swipe( { moving: function(target, posX) { 
        target.css( 'left' , posX + 'px'); 
    } });

$('.child').on_swipe( { moving: function(target, posX) { 
        target.css( 'left' , posX + 'px'); 
    } });

使用 jQuery 嵌套拖动、滑动

Nested Drag, Swipe using jQuery

javascript

jquery

drag

swipe

jquery-draggable