简单写一下JS拖动窗口

首先简单的实现拖动

  <div class="demo">
    </div>

      let demo = document.querySelector('.demo')

建立一个DIV并用JS操作DOM获取它
然后分解我们的需求，
首先是点击，然后可以拖动使DIV跟随鼠标，随后松开鼠标，DIV重新定位。
那么我们就清楚我们需要用到三个鼠标事件他们分别是

onmousedown //鼠标按住
onmouseup //鼠标松开
onmousemove //鼠标移动

然后我们要做的就是需要引入一个变量，用来做到鼠标保持点击状态再执行鼠标移动事件。将三种鼠标事件关联在一起
于是我们的代码是这样

 let demo = document.querySelector('.demo')
  let move = false
  
 demo.onmousedown = function(){
    move =true
 }
 window.onmouseup = function(){
     move = false
 }
 window.onmousemove = function(){
     if(move){
         //执行移动跟随代码
     }
 }

那么剩下就实现div跟随移动。
我们的思路是通过鼠标的位置来决定div的位置。
所以我们要先讲div绝对定位，利用鼠标的e.pageX 和 e.pageY 与div的top和left数值绑定。
于是我们简单的实现了跟随移动

 window.onmousemove = function(e){
     if(move){
         //执行移动跟随代码
         demo.style.left = e.pageX+'px'
         demo.style.top = e.pageY+'px'//后需要拼接px
     }

简单的小优化

因为我们使用的定位的left 和top来实现拖动div改变位置。
导致我们div定位的基点一直在左上角 并不是完全的跟随鼠标
简单的优化下，就是要判断鼠标在div里的位置
可以通过鼠标距离页面的距离减去 div距离页面的距离来判断鼠标在div中的位置

  demo.onmousedown = function (e) {
            x = e.pageX - demo.offsetLeft
            y = e.pageY - demo.offsetTop
            move = true
        }

引用x,y变量得到鼠标在div的位置。
然后

window.onmousemove = function (e) {
            if (move) {
                //执行移动跟随代码
                demo.style.left = e.pageX -x+ 'px'
                demo.style.top = e.pageY -y+ 'px'
            }

解决了我们鼠标一直处在左上角的问题。

因为我们引用变量关联三个事件，会发现我们在只用的过程中
无论是当前窗口失焦，onmousedown 与onmouseup 中因为其他操作了其他事件，导致我们鼠标松开以后，Move变量依然为true onmousemove依然在执行。
所以我们也需要针对一些情况做一些优化
当前窗口失焦

    window.onblur = function () {
            canmove = false//失去焦点判断
        }

当 中途进行其他事件 我们选择禁用默认事件

 window.onmousemove = function (e) {
            e.preventDefault();//取消默认事件
            if (move) {
                //执行移动跟随代码
                demo.style.left = e.pageX -x+ 'px'
                demo.style.top = e.pageY -y+ 'px'
            }

还有一些比如说DIV操作中鼠标右键的一个事件禁用

    demo.oncontextmenu = function (e) {
            e.preventDefault();//取消默认事件
        }

这样简单的进行了一些小优化

总结

很简单的一些代码，为了写的详细些，已经疯狂的拖泥带水了~
具体没什么好总结的。