H5元素拖拽效果

需引入hammer.min.js库


/*拖拽效果*/
//获取相关CSS属性
   var getCss = function(o,key){
       return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];   
   };
 
   function drag(element){
       element.style.top = getCss(element,"top");
       element.style.left = getCss(element,"left");
       var hammer = new Hammer(element);//hammer实例
       var x = 100;
       var y = 100;
       hammer.on('panstart',function(event){
           x = parseInt(element.style.left);
           y = parseInt(element.style.top);
       });
       hammer.on('panmove',function(event){ 
           element.style.top = y + event.deltaY +20+ "px";
           element.style.left = x + event.deltaX +10+ "px";
       });
       hammer.on('panend',function(event){

       });

   }