用Hammer.js在多個元素上觸發不同的事件

我嘗試三天在同一時間對兩張不同的圖片做簡單的拖動事件。我搜查了很多東西，但我發現了一些今天工作不好的老例子。用Hammer.js在多個元素上觸發不同的事件

我已經成功地將拖拽和捏事件應用於我的所有圖片，但是當我嘗試選擇兩張不同的圖片時，Hammer.js認爲我想捏出第一張選定的圖片。

我如何判斷Hammer.js我想在多個元素上使用不同的事件？

編輯：新代碼，你的意見是什麼？

所以，我改變了很多小東西。我覺得我在正確的方式^^ 現在app.js是這樣的：

/* Look the main container now, and wait something with the element */ 
function PicturesMod(container, element) { 
    var container = document.getElementById(container); 
    var hammertime = new Hammer(container, { 
     drag_max_touches: 0, 
     prevent_default: true, 
     scale_treshold: 0, 
    }); 
    hammertime.on("drag dragend transform", function(ev) { 
     var touches = ev.gesture.touches; 
     ev.gesture.preventDefault(); 

     var posX = 0, posY = 0, width = 0; 
     for(var t = 0, len = touches.length; t < len; t++) { 
      target = touches[t].target; 
      target.style.zIndex = 100; 
      if(target.className.indexOf(element) < 0) { 
       return; 
      } 
      switch(ev.type) { 
       case 'drag': 
        // Check the limit of the screen 
        if(ev.gesture.center.pageX < 1800) 
         posX = ev.gesture.center.pageX; 
        else 
         posX = 1800; 

        if(ev.gesture.center.pageY < 950) 
         posY = ev.gesture.center.pageY; 
        else 
         posY = 950; 

        width = target.width; 

        // Center the pointer 
        target.style.top = (posY - width/2) + "px"; 
        target.style.left = (posX - width/2) + "px"; 
       break; 
      } 
     } 
    }); 
}

和index.html：

<div id="container"> 
    <img src="img/pic1.jpg" alt="" width="350" height="200" class="polaroid"/> 
    <img src="img/pic2.jpg" alt="" width="200" height="200" class="polaroid"/> 
    <img src="img/pic3.jpg" alt="" width="250" height="300" class="polaroid"/> 
</div> 

<script src="js/app.js"></script> 
<script> 
    new PicturesMod("container", "polaroid"); 
</script>

我現在可以操縱我的不同元素比以前好多了，但我仍然無法在同一時間拖動兩個不同的元素！

任何人都可以幫忙嗎？

來源

2014-02-17 Jibi

我很快就試圖用你的代碼重新創建你的情況，但圖片不可拖動。您是否遺漏了您使用過的一些重要代碼或信息？我會嘗試解決這個問題，因爲到目前爲止還沒有人跳過它。只需要給我更多的代碼就可以了，因爲它看起來目前給定的代碼不起作用。

來源

2014-03-10 21:34:47

經過多日，我發現問題：在W7上，Hammer.js不支持多點觸摸手勢。建議使用W8或Android/iOS網絡瀏覽器。事實上，在W7上用Hammer.js運行多點觸控手勢是不可能的！因爲我必須在W7上工作，所以我現在使用C＃Touch API ^^。 – Jibi

這不可能是真的，操作系統不是運行JS的東西。你能鏈接說明這一說法的文章嗎？我可以沉浸在不同版本的IE瀏覽器，也許，但不是Windows。 –

@ChristopherGwilliams：遲到的評論，但也許會對某人有所幫助：這是Hammer API不關心W7，它不是操作系統的錯誤：它是兼容性選擇。點擊此處查看更多信息：[http://hammerjs.github.io/browser-support/](http://hammerjs.github.io/browser-support/） – Jibi

用Hammer.js在多個元素上觸發不同的事件

回答

相關問題