Question

我尝试了三天，同时在两张不同的照片上做一个简单的拖动事件。我经常搜索，但我发现了一些今天工作不好的旧例子。

我已成功将拖拽事件应用到我的所有照片中，但当我尝试选择两张不同的照片时，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>

我现在可以比以前更好地操纵我的不同元素，但我仍然不能同时拖动两个不同的元素！

任何人都可以提供帮助吗？

Answer 1

我很快就尝试使用您的代码重新创建您的情况，但图片不可拖动。您是否遗漏了您使用的一些基本代码或信息？我将尝试解决这个问题，因为到目前为止还没有人跳过它。只需给我更多代码，因为看起来当前给定的代码不起作用。

使用Hammer.js在多个元素上触发不同的事件

1 个答案: