HTML5拖放在DIV與Hammer.js拖動事件

Question

TL降元素; DR

我想使用HTML5拖放元素的下降與阻力Hammer.js事件的容器。但是，有衝突。

詳細描述：

如在所附的圖中介紹，我有兩個容器：

1. 左：與錘容器：與拖動元件
2. 右容器。 js事件，即drag，dragstart和dragend。

我想拖放從左邊的容器元素，以正確的。 但是，在拖拽時，如果輸入正確的容器，則會激活Hammer.js dragstart事件。刪除元素後，我將拖動事件應用於正確的容器。但是，Hammer.js拖動事件已激活，它會考慮先前dragstart事件中的deltaX和deltaY。

Hammer.js正在使用的preventDefault：真：

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

我已經使用event.preventDefault（）和event.stopPropagation（）在可拖動的元素在dragstart，沒有成功。

我也部分解決了這個問題。在Hammer.js容器的dragstart事件中，我添加了以下驗證，以檢查源元素和目標是否相同。但是，右側容器中的拖動僅適用於第二個操作，因爲第一個操作會被忽略。

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

有關如何在使用HTML5拖放API拖動元素時阻止Hammer.js事件的任何想法？

我想使用標誌作爲最後的手段，因爲Hammer.js事件應該由第三方開發。

感謝您的幫助。

Answer 1

Hammer.js事件只能在先前被綁定的情況下捕獲。

嘗試使用case語句...（這是來自我最近構建的應用程序）我可以將語句分解出來或返回false等來防止出現問題。但理論上講，如果我解開或排除事件「拖曳」，它應該無論如何工作。

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