pc+移动端的拖拽框制作

 <style>
      .b{
          position: fixed;
          top: 50%;
          left: 50%;
          width: 300px;
          height: 200px;
          background-color: pink;
          transform: translate(-50%,-50%);
      }


    </style>

<div class="b"></div>
    <script>
        var div =document.querySelector('.b')
        console.log(div);
        
        div.addEventListener('mousedown',function(e){ //当鼠标按下式，获取鼠标在盒子内的坐标
            var x =e.pageX -div.offsetLeft
            var y =e.pageY -div.offsetTop
            console.log(x);
            console.log(y);
            document.addEventListener('mousemove',moves) //当鼠标按下时，鼠标 在文档中移动，，盒子跟着移动
               function moves(e){
                div.style.left=e.pageX -x +'px'         //鼠标移动时的坐标减去鼠标在盒子内的坐标就是动态盒子的top left
                div.style.top=e.pageY -y +'px'
               }
               document.addEventListener('mouseup',function(){  //鼠标弹起的时候，清除鼠标移动事件，还原原坐标。
                   document.removeEventListener('mousemove',moves)
                   div.style.left='50%'
                   div.style.top='50%'
               })  
            }
        )
        

    </script>

核心思路：

   var div = document.querySelector('.b')
        console.log(div);
        var x = 0
        var y = 0
        div.addEventListener('touchstart', function (e) { //当手指 按下时，获取手指在盒子内初始的坐标
            x = e.targetTouches[0].pageX - this.offsetLeft
            y = e.targetTouches[0].pageY - this.offsetTop
            console.log(x);
            console.log(y);


        })
        div.addEventListener('touchmove', function (e) { // 当手指移动之后的坐标-手指在盒子内的初始的坐标
            this.style.left = e.targetTouches[0].pageX - x + 'px'
            this.style.top = e.targetTouches[0].pageY - y + 'px'
            e.preventDefault()  //阻止屏幕滚动的默认行为，
        })

手机端的拖拽做法
Pc和移动的区别：
区别就是pc端要清除移动事件，PC端的移动事件和鼠标弹起事件要写在鼠标按下事件之中，并且事件对象是文档
移动端不用清除事件，只需要触屏事件和触屏移动事件俩个就够了，因为当手指离开时，自动停止触屏事件，单独写，事件对象是盒子本身，注意要阻止触屏事件中的屏幕滚动的默认行为。