Nested Drag, Swipe using jQuery

Question

Folowing code is for nested swiping/dragging, parent and child both are draggable.

P1... It's working nice but with one lovely problem, if we drag the parent alone it works perfectly. But when we drag draggable child the parent also gets dragged automatically... Jsbin for P1...

P1... is caused by ".closest('.'+ mainElem[0].className)"; if i remove this then the parent does not get dragged while dragging child, ''''giving birth to another problem.

.......... and that is ..........

P2... If we click on any non-draggable child suppose text, then the draggable parent does not move. ...AND... if we click on the tri-line menu-button then it gets dragged instead of its draggable 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'); 
    } });

Thank you :)

score 1 · Accepted Answer · edited Aug 12 '15 at 10:59

1

Solved your P1... and P2.. problem

1) Changed your "mousedown" click from document to the actual element its initialized on.

2) added "stopPropagation()" for not to drag the parent when the child is dragged

3) removed the "mouseup" event from the initialized element and added it to the document

updated jsbin P1

Let me know if you have any other concerns

Updates: Added as per @kanudo request in the comment jsbin

Updates: Final correct ..JSBIN..

edited Aug 12 '15 at 10:59

kanudo

2,119
1
17
33

answered Aug 12 '15 at 05:37

Kushal

1,360
6
16

thanks Kushal :), still one new **P...** ;) when the mouse is down on any draggable node, then if we move the mouse out of that node, then that node does not move even before mouse up. and i need thing that it should only stop on mouse up and not on mouseleave/mouseout – kanudo Aug 12 '15 at 08:47
@Kaushal there is a new P... ;) in you answer at [here](https://jsbin.com/xanemiguvu/edit?js,output)... that if you click on draggable child at first then you will not be able to drag the parent without the refresh... and on other side if you drag the parent at first, then you want be able to drag the child without refresh... – kanudo Aug 12 '15 at 09:25
@Kaushal i just mentioned my answer below which has all the changes for perfect working – kanudo Aug 12 '15 at 09:28
yap bro @Kaushal, that is perfect... :) – kanudo Aug 12 '15 at 09:30
cheers @Kaushal :) Friend can you guide me that how to do this on event based like.... `$('.parent').on('on_swipe', function(){});` – kanudo Aug 12 '15 at 09:34
When should the "on_swipe" event be called or what do you want to do when its called ? – Kushal Aug 13 '15 at 04:46

score 0 · Answer 2 · answered Aug 12 '15 at 09:11

HURRAY, HERE is the perfect solution but with help of e.stopPropagation(); which came into notice from answer by @Kushal

Here is the proper answer : ...Jsbin... for the solved answer with perfect working...

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

Nested Drag, Swipe using jQuery

2 Answers2