html_node 마우스 이동 처리 함수. toDraggable

tag:1 #javascript
이쪽으로 옮겼음

  /**
  * 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}
  }
댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
제목 작성자 날짜
공대여자 18-10-1710-17
공대여자 11-03-0303-03
tag:1 #link
공대여자 05-11-2811-28
공대여자 19-02-1902-19
공대여자 19-02-1802-18
공대여자 19-02-0102-01
공대여자 19-02-0102-01
공대여자 19-01-2901-29
tag:2 #hdd #hardware
공대여자 19-01-2901-29
공대여자 19-01-2901-29
공대여자 19-01-2201-22
공대여자 19-01-2101-21
tag:3 #ui #css #ruler
공대여자 19-01-1801-18
공대여자 19-01-1801-18
공대여자 19-01-1401-14
공대여자 19-01-1101-11
공대여자 19-01-1101-11
공대여자 19-01-1001-10