JavaScript div浮动层拖拽效果
js 的 div 浮动层拖拽效果，基本属于前端人手一份的小功能库。用原生 JavaScript 写，逻辑清晰、思路直白，代码也不多，适合自己二次封装或集成到业务里。比较适合那种不想引入第三方库、又想要点交互的小场景，比如自定义弹窗、漂浮按钮、工具面板啥的。
绝对定位的 div是关键，拖拽的时候要通过监听mousedown、mousemove、mouseup这三个事件组合拳来搞定位置移动。
核心思路其实简单：按下鼠标时记录位置，移动时算偏移，抬起鼠标就解绑事件。像下面这样：
draggable.addEventListener('mousedown', function(event) {
var startX = event.clientX - parseInt(draggable.style.left);
var startY = event.clientY - parseInt(draggable.style.top);
function mouseMoveHandler(event) {
draggable.style.left = (event.clientX - startX) + 'px';
draggable.style.top = (event.clientY - startY) + 'px';
}
function mouseUpHandler() {
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
}
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);
});
写完基本拖拽，建议你加个边界判断，防止 div 飘出屏幕之外。可以用getBoundingClientRect()拿父容器范围，再配合Math.min和Math.max来限制坐标。
这个代码挺适合拿来练手，也适合在项目里直接用。如果你还想拓展一下，可以顺便看看下面这些相关例子：
如果你项目里有需要手动拖拽浮动元素，不妨试试这个方案，代码干净、逻辑清晰，响应也快。
