PC端、移动端拖拽元素

PC端、移动端拖拽元素思路，鼠标或手指按下，鼠标拖动或手指滑动，鼠标抬起或手指离开屏幕，根据这3个事件判断设备类型后进行事件绑定

 // 判断是否是移动端，因为移动端才会有ontouchstart
 function isMobile() {
     return 'ontouchstart' in document.documentElement;
 }

 function eventName() {
     if (isMobile()) {
         return ['touchstart', 'touchmove', 'touchend'];
     } else {
         return ['mousedown', 'mousemove', 'mouseup'];
     }
 }
 drugElement(document.querySelector('#box'))

 function drugElement(elem) {
     var mtxball_moveX = 0;
         mtxball_moveY = 0;
     var flag = 0; //标记是否可拖动
     var startPageXDistan, startPageYDistan;

     var disX, disY, distansL, distansT, starX, starY, starXEnd, starYEnd, touchStartTime, touchEndTime;
     elem.addEventListener(eventName()[0], function (e) {
         var clientX = e.touches ? e.touches[0].clientX : e.clientX;
         var clientY = e.touches ? e.touches[0].clientY : e.clientY;
         flag = 1;
         touchStartTime = +(new Date());
         disX = clientX - this.offsetLeft;
         disY = clientY - this.offsetTop;
         //手指按下时的坐标
         starX = clientX;
         starY = clientY;
         startPageXDistan = e.touches ? e.touches[0].pageX : e.pageX;
         startPageYDistan = e.touches ? e.touches[0].pageY : e.pageY;
         //console.log(disX);
     }, false);

     elem.addEventListener(eventName()[1], function (e) {
         e.preventDefault(); //阻止触摸时页面的滚动，缩放
         var clientX = e.touches ? e.touches[0].clientX : e.clientX;
         var clientY = e.touches ? e.touches[0].clientY : e.clientY;
         if(flag == 0){return}
         distansL = clientX - disX;
         distansT = clientY - disY;
         //移动时 当前位置与起始位置之间的差值
         starXEnd = clientX - starX;
         starYEnd = clientY - starY;
         //console.log(distansL);
         if (distansL < 0) { //限制拖拽的X范围，不能拖出父容器左侧
             distansL = 0;
         } else if (distansL > $(this).parent().width() - this.offsetWidth) {//限制拖拽的X范围，不能拖出父容器右侧
             distansL = $(this).parent().width() - this.offsetWidth;
         }
         if (distansT < 0) { //限制拖拽的Y范围，不能拖出父容器
             distansT = 0;
         } else if (distansT > $(this).parent().height() - this.offsetHeight) {
             distansT = $(this).parent().height() - this.offsetHeight;
         }
         mtxball_moveX = distansL + "px";
         mtxball_moveY = distansT + "px";
         //console.log(mtxball_moveX);
         this.style.left = mtxball_moveX;
         this.style.top = mtxball_moveY;
         
         flag = 1;
     }, false);

     elem.addEventListener(eventName()[2], function (e) {
         touchEndTime = +(new Date());
         var touchTime = touchEndTime - touchStartTime;
         var endX, endY;
         endX = e.changedTouches ? e.changedTouches[0].pageX : e.pageX;
         endY = e.changedTouches ? e.changedTouches[0].pageY : e.pageY;
         var dx = startPageXDistan - endX;
         var dy = startPageYDistan - endY;
         flag = 0;
         //水平和垂直方向移动距离和触摸时间判断  
         if(Math.abs(dx) < 5 && Math.abs(dy) < 5 && touchTime < 250) {  
            console.log('点击，非拖动')
         }
     }, false);

     $(document).on(eventName()[2],function(){
         flag = 0;
     })
 }

<style>
    #box {
        position: absolute;
        width: 200px;
        height: 200px;
        background: rgb(67, 134, 235);
    }
</style>
<div style="position:relative;border:1px solid #ddd;width:300px;height:300px;">

    <span id="box"></span>
</div>