Вложенное перетаскивание, прокручивание с помощью jQuery

Question

Код для размещения вложенных прокручиваний/перетаскивания, родительский и дочерний объекты перетаскиваются.

P1 ... Он работает хорошо, но с одной прекрасной проблемой, если мы перетаскиваем родителя в одиночку, он отлично работает. Но когда мы тянем перемещаемый ребенок родитель также получает тащил автоматически ... Jsbin for P1...

P1 ... вызываются ".closest (+ mainElem [0] .className '')"; если я удалю это, то родительский элемент не будет перетаскиваться при перетаскивании дочернего элемента, '' '' порождает другую проблему.

.......... и это ..........

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

УРА, ЗДЕСЬ это идеальное решение, но с помощью 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'); 
    } });