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

이쪽으로 옮겼음

  /**
  * 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}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
3.31
4.1
4.2
4.3
4.4
4.5
4.6
4.7
4.8
4.10
4.11
4.12
4.13
4.14
4.15
4.16
4.18
4.19
4.20
4.21
4.22
4.23
4.24
4.25
4.26
4.27
4.28
4.29
4.30
5.1
5.2
5.3
5.4