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}}
    -
제목 작성자 날짜
Oracle ORACLE 오라클 유용한 쿼리 공대여자 11-02-1602-16
Linux 유용한 리눅스(LINUX) 명령어 공대여자 11-03-0303-03
Link 주요 링크 정리 LINK 공대여자 05-11-2811-28
HTML5 [기본형] HTML (with 부트스트랩4.1.3 , jquery 3.3.1, vue.js) 공대여자 18-10-1710-17
==etc== 도용 사이트 공대여자 14-12-2912-29
UI ui_ColorPallet 컬러 파레트 색상표 2 공대여자 18-12-1412-14
JavaScript ui_toDraggable 이동 이벤트 제어 2 공대여자 18-12-1112-11
HTML5 ui_MultipleInputBox 1 공대여자 18-12-0612-06
CSS(Style) websafe fonts , 폰트 정보 1 1 공대여자 18-12-0512-05
HTML5 manifest.json 사용한 웹앱(web app)의 스플래쉬 스크린 splash screen 에서 이미지 안 보이는 것 관련 공대여자 18-12-0312-03
CSS(Style) caret-color , input 의 text cursor 1 공대여자 18-11-2611-26
JavaScript html_node 마우스 이동 처리 함수. toDraggable 공대여자 18-11-1611-16
UI UI SelectArea 2 공대여자 18-11-1211-12
UI InputRangeBox 슬라이더 slider 2 공대여자 18-11-0211-02
PHP php 유니코드 문자열을 한글자씩 배열로 자르기 공대여자 18-10-3010-30
==WebLang== 크롬 70.x window.applicationCache 지원 중지 , Remove AppCache from insecure contexts 공대여자 18-10-1910-19
HTML5 Battery Status API , BatteryManager 1 1 공대여자 18-10-1910-19
CSS(Style) CSS grid 1 공대여자 18-10-1710-17
HTML5 [기본형] HTML (with 부트스트랩4.1.3 , jquery 3.3.1, vue.js) 공대여자 18-10-1710-17
CSS(Style) css mix-blend-mode 공대여자 18-10-1110-11