A Pen by Felipe Uribe Aristizabal.

Drag-and-drop-horizontal-hammerjs.markdown

Drag and drop horizontal hammerjs

A Pen by Felipe Uribe Aristizabal on CodePen.

License.

index.html

<script src="https://hammerjs.github.io/dist/hammer.js"></script>

<div id="draggable"></div>

script.js

var myElement = document.getElementById('draggable');
var mc = new Hammer(myElement);
var actual = 0;

mc.on("panleft panright tap press", function(ev) {

    myElement.style.left =  (actual + ev.deltaX) + "px";
    console.log(ev.deltaX);
    
});

mc.on("panend",function(ev){
	console.log(myElement.style.left);
	actual = parseInt(myElement.style.left) ;
});

style.css

#draggable {  
  background: #38D1AC;
  height: 300px;
  text-align: center;
  font: 30px/300px Helvetica, Arial, sans-serif;
  left:0px;
  width: 200px;
  position: absolute;
}