Question

Folowing代码用于嵌套滑动/拖动，父级和子级都可以拖动。

P1 ... 它工作得很好，但有一个可爱的问题，如果我们单独拖动父母，它就能很好地工作。但是当我们拖动可拖动的孩子时，父母也会被自动拖动... Jsbin for P1...

P1 ...由＆＃34; .closest（＆＃39;。＆＃39; + mainElem [0] .className）＆＃34;; 如果我删除了这个，那么在拖动孩子的同时不会拖动父母，＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;生成另一个问题。

..........那就是..........

P2 ... 如果我们点击任何不可拖动的儿童假设文字，则可拖动的父不会移动。 ... ...如果我们点击三线菜单按钮然后它被拖动而不是可拖动的父级 ... 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 ，HERE是完美的解决方案，但在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滑动

2 个答案: