CSS

.test {
  border:1px solid red;
  width:100px;
  height:100px;
  position: absolute;
  left:0;
  top:0;
}
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

JS

let div = document.createElement('div')
document.body.appendChild(div)
div.className = 'test'

let ifdragging = false  //是否进入拖拽状态
let preX  //鼠标的当前位置
let preY

div.onmousedown = function (e){ //鼠标按下时候，进入拖拽状态，同时把当前位置记录下来
  ifdragging = true
  preX = e.clientX
  preY = e.cientY
}

document.onmousemove = function (e){ //必须监听document（body也行，不过得css设置body{height:100%vh;}，防止拖拽过快会丢失div的bug
  if(ifdragging === true){                    
     let moveX = e.clientX - preX  //获取移动的x与y数值
     let moveY = e.clientY - preY 
     preX = e.clientX //同时把鼠标位置设置成上一个移动到的点
     preY = e.clientY
     let top = parseInt(div.style.top) || 0 //获取div原始的位置top和left 同时保证是数字而不是auto之类的
     let left = parseInt(div.style.left) || 0
     div.style.top = top + moveY + 'px'  //将div的top和left设置为原始的加上移动的距离
     div.style.left = left + moveX + 'px'
     
  }
}

div.onmouseup = function(){ //鼠标松开时候移除拖拽状态
  ifdragging = false
}