HTML5 Drag & Drop-Element über div mit Hammer.js Drag Ereignisse

Question

TL; DR

Ich möchte per Drag Hammer.js Ereignisse in einen Container HTML5 Drag & Drop eines Elements verwenden. Es gibt jedoch Konflikte.

Detaillierte Beschreibung:

Wie in der beigefügten Abbildung dargestellt, ich habe zwei Behälter:

1. Links: Behälter mit ziehbar Elementen
2. Recht: Behälter mit Hammer. js Ereignisse, nämlich Drag, Dragstart und Dragend.

Ich möchte Elemente aus dem linken Behälter nach rechts ein ziehen. Während des Ziehens wird jedoch beim Eingeben des rechten Containers das dragstart-Ereignis Hammer.js aktiviert. Nach dem Löschen des Elements trage ich das Ziehereignis auf den richtigen Container ein. Das Drag-Ereignis Hammer.js ist jedoch aktiviert und berücksichtigt deltaX und deltaY des vorherigen Dragstart-Ereignisses.

Hammer.js wird mit prevent verwendet: true:

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

Ich habe bereits verwendet Event.preventDefault() und event.stopPropagation() auf dem drag des ziehbar Elements, ohne Erfolg.

Ich habe auch das Problem teilweise gelöst. Im Dragster-Ereignis des Containers Hammer.js habe ich die folgende Überprüfung hinzugefügt, um zu überprüfen, ob das Quellelement und das Ziel identisch sind. Das Ziehen im rechten Container funktioniert jedoch nur bei der zweiten Aktion, da die erste ignoriert wird.

Haben Sie eine Idee, wie Sie Hammer.js-Ereignisse verhindern können, während Sie Elemente mithilfe der HTML5-API ziehen?

Ich möchte Flags als letztes Mittel verwenden, da Hammer.js-Ereignisse von Drittanbietern entwickelt werden sollten.

Danke für Ihre Hilfe.

Answer 1

Hammer.js-Ereignisse sollten nur erfasst werden, wenn sie zuvor gebunden wurden.

Versuchen Sie, eine case-Anweisung zu verwenden ... (das ist von einer App, die ich vor kurzem gebaut habe) Ich kann die Anweisung dann ausbrechen oder falsch zurückgeben etc. Dinge zu verhindern. Theoretisch sollte es jedoch funktionieren, wenn ich das Ereignis "ziehen" entbinde oder ausschließe.

<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>