js实现简单页面拖动

1.先画个定位的DIV，并加适当样式

代码

<style>
    #demo {
   
        width: 200px;
        height: 200px;
        background-color: skyblue;
        position: absolute;
    }
</style>

<div id="demo">123456</div>

界面效果

这是静态效果，后续会实现功能

2.监听mousedown鼠标按下，mouseup鼠标松开， mousemove鼠标移动， mouseout鼠标滑出

代码

let demo = document.querySelector('#demo')
window.onmousedown = function (e) {
   //鼠标按下触发
            console.log('鼠标按下了')
        }
window.onmouseout = function () {
   //鼠标滑出触发
            console.log('鼠标滑出了')
        }
window.onmouseup = function (e) {
   //鼠标松开