HTML5 przeciągnij i upuść element, nad div z Hammer.js drag wydarzeń

Question

TL; DR

Chcę używać HTML5 przeciągnij i upuść elementu do pojemnika z drag wydarzeń Hammer.js. Jednak są konflikty.

Szczegółowy opis:

Jak przedstawiono na załączonym rysunku, mam dwa pojemniki:

1. lewej: pojemnik z elementami Draggable
2. prawej: kontenerowych z młotkiem. zdarzenia js, a mianowicie przeciąganie, przeciąganie i przeciąganie.

chcę przeciągać elementy z lewego pojemnika do prawej. Jednak podczas przeciągania podczas wchodzenia do prawego kontenera aktywowane jest zdarzenie dragstart Hammer.js. Po upuszczeniu elementu stosuję zdarzenie przeciągania na prawym kontenerze. Jednak zdarzenie przeciągania Hammer.js jest aktywne i uwzględnia deltaX i deltaY z poprzedniego zdarzenia dragstart.

Hammer.js jest używany z preventDefault: true:

Hammer(this.container, {preventDefault: true}).on('dragstart', function (event) { ... } 

już używany event.preventDefault() i Event.stopPropagation() na dragstart elementu Draggable, bez powodzenia.

Częściowo rozwiązałem problem. W zdarzeniu dragstart kontenera Hammer.js dodano następującą weryfikację, aby sprawdzić, czy element źródłowy i cel są takie same. Jednak przeciąganie w prawym kontenerze działa tylko na drugą akcję, ponieważ pierwsza jest ignorowana.

if (event.gesture.startEvent.srcEvent.srcElement != event.gesture.target) { 
    return false; 
} 

Każdy pomysł, w jaki sposób zapobiegania incydentom Hammer.js podczas przeciągania elementów za pomocą przeciągania i upuszczania HTML5 API?

Chcę używać flag jako ostateczności, ponieważ wydarzenia Hammer.js powinny być opracowywane przez strony trzecie.

Dzięki za pomoc.

Answer 1

Wydarzenia Hammer.js powinny być przechwytywane, tylko jeśli zostały wcześniej powiązane.

Spróbuj użyć instrukcji case ... (jest to z aplikacji, którą ostatnio zbudowałem) Mogę złożyć oświadczenie, a następnie włamać się do niego lub zwrócić fałszywe itp., Aby temu zapobiec. Teoretycznie jednak, jeśli rozwiążę lub wykluczę wydarzenie "przeciągnij", powinno to i tak zadziałać.

<script> 
var hammertime = Hammer(document.getElementById('image-wrapper'), { 
     transform_always_block: true, 
     transform_min_scale: window.initScale, 
     transform_max_scale: 1, 
     drag_block_horizontal: true, 
     drag_block_vertical: true, 
     drag_min_distance: 0 
    }); 

    //console.log(hammertime); 

    var posX = window.calcLeft, posY = window.calcTop, 
     lastPosX = window.calcLeft, lastPosY = window.calcTop, 
     bufferX = 0, bufferY = 0, 
     scale = window.initScale, last_scale, 
     rotation = window.rotationNeeded, last_rotation, dragReady = 0; 


hammertime.on('touch drag dragend transform release mouseleave transformend pinchin pinchout', function (ev) { 
     elemRect = document.getElementById('the-image'); 
     manageMultitouch(ev); 
    }); 
function manageMultitouch(ev) { 
     var pinchDirection; 
     ev.stopPropagation(); 

     //console.log(ev.type); 

     switch (ev.type) { 
      case 'touch': 
       last_scale = scale; 
       last_rotation = rotation; 

       break; 

      case 'drag': 

       posX = ev.gesture.deltaX + lastPosX; 
       posY = ev.gesture.deltaY + lastPosY; 

       break; 

      case 'pinchin': 

       console.log('pinchin'); 
       pinchDirection = "in"; 

       break; 

      case 'pinchout': 


       console.log('pinchout'); 
       pinchDirection = "out"; 


       break; 

      case 'transform': 

       rotation = window.rotationNeeded;// rotation + ev.gesture.rotation;//we can change this to snap rotation eventually. 
       //console.log('Last Scale: ', last_scale); 
       scale = Math.max(hammertime.options.transform_min_scale, Math.min(last_scale * ev.gesture.scale, 1)); 
       var propsImage = document.getElementById('the-image').getBoundingClientRect(); 
       //console.log(propsImage); 
       var propsBox = document.getElementById('image-wrapper').getBoundingClientRect(); 
       //console.log(propsBox); 


       break; 

      case 'transformend': 
       console.log('We are finished transforming.'); 
       //when they finish transforming, we need to determinw what the new left reset position would be. 
       var propsImage = document.getElementById('the-image').getBoundingClientRect(); 
       var propsBox = document.getElementById('image-wrapper').getBoundingClientRect(); 
       //window.calcLeft = Math.round(window.preBounds.left - propsImage.left); 
       //console.log(ev.type); 
       //if (pinchDirection = "out") { 

       window.calcLeft = Math.round(window.calcLeft + ((propsImage.width - propsBox.width)/2)); 

       //} else if (pinchDirection = "in") { 

       //window.calcLeft = Math.round(window.calcLeft - ((propsImage.width - propsBox.width)/2)); 
       //} 
       //window.calcTop = Math.round(window.calcTop + ((propsImage.top - propsBox.top)/2)); 
       //console.log(window.calcLeft); 


       break; 

      case 'dragend': 
       //console.log('We are finished dragging.'); 
       //console.log(window.calcLeft); 
       lastPosX = posX; 
       lastPosY = posY; 
       checkBounds(); 


       break; 

      case 'mouseleave': 
       //console.log('Release!', posX, posY); 
       //checkBounds(); 
       break; 

     } 

<script>