Fire different events on multiple elements with Hammer.js

Question

I try for three days to do a simple drag event on two different pictures in the same time. I searched a lot but I just found old examples who not working great today.

I have succeeded to apply the drag and pinch events to all my pictures, but when I try to select two different pictures, Hammer.js believe I want to pinch the first selected picture.

How can I tell with Hammer.js I want different events on multiple elements?

---

EDIT: new code, what's your opinions?

So, I changed a lot of little things. I think am in the right way ^^ Now app.js look like this:

/* 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;
            }
        }
    });
}

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

I can now manipulate my different elements much better than before, but I still can't drag two different element on the same time!

Anyone can help?

Answer 1

I quickly tried to use your code to recreate your situation, but the pictures aren't draggable. Are you leaving out some essential code you used, or information? I will attempt at solving this issue since no one has jumped on it so far. Just give me more code to work with, as it seems the current given code isn't working.