当前位置： 移动技术网 > IT编程>网页制作>HTML > 前端页面拖拽实例（css+js实现）

前端页面拖拽实例（css+js实现）

2020年08月08日  | 移动技术网IT编程  | 我要评论

鼠标拖动方块，并限制出界：
实现效果：
在这里插入图片描述

html 文件 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <div id="box"></div> <script src="./src/script.js"></script> </body> </html>

css 文件 

* { margin: 0px; padding: 0px; } #box { width: 50px; height: 50px; background-color: blueviolet; position: absolute; }

js 文件 

// 获取到要拖拽的对象 const oDiv = document.getElementById('box'); function limitDrag(node) { node.onmousedown = function (ev) { let e = ev || window.event; // 获取鼠标到 node 左上角的相对位置 let offSetX = e.clientX - node.offsetLeft; let offSetY = e.clientY - node.offsetTop; document.onmousemove = function (ev) { let e = ev || window.event; // 鼠标移动时，计算 node 左上角应该在的位置 let x = e.clientX - offSetX; let y = e.clientY - offSetY; // 限制出界 // 获取当前窗口的宽高 let Width = document.documentElement.clientWidth || document.body.clientWidth; let Height = document.documentElement.clientHeight || document.body.clientHeight; if (x <= 0) { x = 0; } if (x >= Width - node.offsetWidth) { x = Width - node.offsetWidth } if (y <= 0) { y = 0; } if (y >= Height - node.offsetHeight) { y = Height - node.offsetHeight } node.style.left = x + 'px'; node.style.top = y + 'px'; } } document.onmouseup = function () { document.onmousemove = null; } } limitDrag(oDiv);

本文地址：https://blog.csdn.net/Web_blingbling/article/details/107868162

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网