HTML5 trascinare e rilasciare elemento sopra div con Hammer.js eventi di trascinamento

Question

TL; DR

voglio utilizzare HTML5 drag and drop di un elemento ad un contenitore con trascinare gli eventi Hammer.js. Tuttavia, ci sono conflitti.

Descrizione dettagliata:

Come presentato nella figura allegata, ho due contenitori:

1. sinistra: contenitore con elementi trascinabili
2. destra: contenitore con il martello. eventi js, ovvero trascina, trascina e trascina.

voglio trascinare gli elementi dal contenitore di sinistra alla quella giusta. Tuttavia, durante il trascinamento, quando si entra nel contenitore giusto, viene attivato l'evento dragstart Hammer.js. Dopo aver rilasciato l'elemento, applico l'evento di trascinamento sul contenitore giusto. Tuttavia, l'evento di trascinamento Hammer.js è attivato e considera il deltaX e il deltaY dall'evento dragstart precedente.

Hammer.js viene utilizzato con preventDefault: true:

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

Ho già usato event.preventDefault() e event.stopPropagation() sul dragstart dell'elemento trascinato, senza successo.

Ho anche parzialmente risolto il problema. Nell'evento dragstart del contenitore Hammer.js, ho aggiunto la seguente verifica, per verificare se l'elemento source e il target sono gli stessi. Tuttavia, il trascinamento nel contenitore di destra funziona solo sulla seconda azione, poiché il primo viene ignorato.

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

Qualche idea su come evitare gli eventi di Hammer.js durante il trascinamento di elementi utilizzando l'API di trascinamento e rilascio HTML5?

Desidero utilizzare le bandiere come ultima risorsa, poiché gli eventi Hammer.js devono essere sviluppati da terze parti.

Grazie per il vostro aiuto.

Answer 1

Gli eventi Hammer.js devono essere catturati solo se sono stati precedentemente associati.

Provare a utilizzare una dichiarazione di caso ... (questo è da un'app che ho creato di recente) Posso fare in modo che l'affermazione si interrompa o restituisca false ecc. Per evitare cose. In teoria, però, se non slaccio o escludo l'evento "trascina", dovrebbe funzionare comunque.

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