Hammer.js elements in an absolute container scroll container

Question

I have some elements that I want to drag using hammer.js that are inside the container with an absolute location. When the container is an absolute position, it seems that when I drag elements in the container, the entire container moves.

Here is a demo, http://codepen.io/bzamora/pen/vGAFz

I used the drag demo from https://github.com/EightMedia/hammer.js/blob/master/examples/drag.html , but I added .container , which is absolute.

If you comment out position:absolute , it works as expected

So my question is what am I doing wrong or how to avoid this behavior? Thanks!

Answer 1

I suspect this is a styling problem. Removing the elements from the container by positioning them solved the problem.