拖拽效果
拖拽
- 鼠标移动到box上,按下鼠标左键,移动鼠标,box开始跟着鼠标移动
- 鼠标按钮抬起,box不再移动
注意:
- 计算box移动时, 当前box的位置 + 两个坐标的差
- box移动后, 要更新起始坐标位置
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- /* 清除默认样式 */
- *{margin: 0;padding: 0;}
- #box{
- width: 300px;
- height: 300px;
- background: pink;
- cursor: move;
- position: absolute;
- top: 0;
- left: 0;
- }
- </style>
- </head>
- <body>
- <!-- 写div -->
- <div id="box"> 拖我一下试试!!! </div>
- <script>
- var flag = false;// 默认值为false,box不跟随鼠标移动; 为true,box跟随鼠标移动
- var box = document.getElementById('box');
- // 记录鼠标按下的坐标位置
- var x1 = 0;
- var y1 = 0;
- // 当鼠标移动到box上时并且按下, 设置flag为true
- box.onmousedown= function (e) {
- flag = true;//允许跟着鼠标移动
- // 记录当前位置
- x1 = e.pageX;
- y1 = e.pageY;
- };
- // 当鼠标抬起, 设置flag为false
- box.onmouseup= function (e) {
- flag = false;//不允许跟着鼠标移动
- };
- // 当鼠标被甩飞, 设置flag为false
- box.onmouseout= function (e) {
- flag = false;//不允许跟着鼠标移动
- //console.log('鼠标飞走了...');
- };
- // 跟随鼠标
- box.onmousemove = function (e) {
- if(flag){
- //获取鼠标坐标
- var x2 = e.pageX;
- var y2 = e.pageY;
- //console.log(x, y);
- //设置box的位置
- // 坐标位置 = box的现在位置 + (x2-x1) + 'px';
- box.style.top = box.offsetTop + (y2-y1) + 'px';//注意单位
- box.style.left = box.offsetLeft + (x2-x1) + 'px';//注意单位
- }
- // 更新box的起始位置
- x1 = x2;
- y1 = y2;
- };
- </script>
- </body>
- </html>