2 minute read

http://www.mins01.com/mh/tech/read/1217 이쪽으로 옮겼음

  /**   * toDraggable   * @param  {html_node} target   * @param  {function} cb_onpointerdown   * @param  {function} cb_onpointermove   * @param  {function} cb_onpointerup   * @return {object} {“enable”:function , “disable”:function}   */

  var toDraggable = function(target,cb_onpointerdown,cb_onpointermove,cb_onpointerup){     var data={       “ing”:false,       “x0”:0,       “y0”:0     }     var _getXY = function(evt){       var x = evt.clientX;       var y = evt.clientY;       if(evt.isPrimary ){         var x = evt.clientX;         var y = evt.clientY;       }else if(evt.touches && evt.touches[0]){         var touch = evt.touches[0];         var x = touch.X;         var y = touch.Y;       }else{         var x = evt.x;         var y = evt.y;       }       return [x,y];     }     var _onpointerdown = function(target,data,cb_onpointerdown){       // var target = evt.target;       return function(evt){         data.ing = true;         var xy = _getXY(evt);         data.x0 = xy[0];         data.y0 = xy[1];         var r = true;         if(cb_onpointerdown){           r = cb_onpointerdown(evt,xy[0],xy[1]);         }         if(r){            evt.preventDefault();evt.stopPropagation();            document.addEventListener(‘pointermove’,_onpointermove);           document.addEventListener(‘pointerup’,_onpointerup);         }                  return false;       }     }(target,data,cb_onpointerdown)     var _onpointermove = function(target,data,cb_onpointermove){       return function(evt){         if(!data.ing){return;}         var xy = _getXY(evt);         var gapX = xy[0]-data.x0;         var gapY = xy[1]-data.y0;         data.x0 = xy[0];         data.y0 = xy[1];         var r = true;         if(cb_onpointermove){           r = cb_onpointermove(evt,gapX,gapY);         }         if(r){ evt.preventDefault();evt.stopPropagation(); }         return false;       }     }(target,data,cb_onpointermove)     var _onpointerup = function(target,data,cb_onpointerup){       return function(evt){         var r = true;         if(data.ing && cb_onpointerup){           r = cb_onpointerup(evt);         }         data.ing = false;         if(r){            evt.preventDefault();evt.stopPropagation();           document.removeEventListener(‘pointermove’,_onpointermove);           document.removeEventListener(‘pointerup’,_onpointerup);         }         return false;       }     }(target,data,cb_onpointerup)     var _notouchmove = function(evt){ evt.preventDefault();evt.stopPropagation() ;return false;}     var _enable = false;     var enable = function(){       if(!_enable){         target.addEventListener(‘pointerdown’,_onpointerdown);         target.addEventListener(‘touchmove’,_notouchmove);           _enable = true;       }            }     var disable = function(){       if(_enable){         target.removeEventListener(‘pointerdown’,_onpointerdown);         target.removeEventListener(‘touchmove’,_notouchmove);         _enable = false;       }     }     enable();          return {“enable”:enable,”disable”:disable}   }


🔗original-link

Updated: