JavaScript实现简单拖拽框

1.当我们鼠标按下的时候，获取鼠标在盒子内的坐标（当鼠标按下时，鼠标在盒子中的坐标是固定的）

2.当鼠标移动时，得到鼠标在页面中的坐标减去鼠标在盒子中的坐标（当鼠标移动时，我们得到的坐标是一个一直都在变化的值）

3.在把得到的值赋给模态框（值一直是变化的，当我们把值给模态框时，模态框就会跟着鼠标移动）

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 300px;height: 200px;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);cursor: move;background-color: pink;}</style>
</head>
<body><div class="box"></div><script>//当我们鼠标按下的时候，获取鼠标在盒子内的坐标 （当鼠标按下时，鼠标在盒子中的坐标是固定的）// 当鼠标移动时，得到鼠标在页面中的坐标 减去鼠标在盒子中的坐标  （当鼠标移动时，我们得到的坐标是一个一直都在变化的值）// 在把得到的值赋给 模态框 （值一直是变化的，当我们把值给模态框时，模态框就会跟着鼠标移动）var box = document.querySelector('.box');box.addEventListener('mousedown',function(e){//鼠标按下 得到鼠标在盒子中的坐标var x = e.pageX - box.offsetLeft;var y = e.pageY - box.offsetTop;//鼠标移动的时候，把鼠标在页面中的坐标，减去鼠标在盒子内的坐标就是模态框的left和top值document.addEventListener('mousemove',move);function move(e){box.style.left = e.pageX - x + 'px';box.style.top = e.pageY - y + 'px';}//鼠标弹起，就让鼠标移动事件解除document.addEventListener('mouseup',function(){document.removeEventListener('mousemove',move)});})</script>
</body>
</html>

效果：

JavaScript实现简单拖拽框相关推荐

javascript 实现简单拖拽(鼠标事件 mousedown mousemove mouseup)
效果图: 可以通过 https://littlehiuman.github.io/06-Dragable/index.html 查看效果. https://github.com/littleHiuma ...
鼠标事件：onclick、onmousedown、onmouseup、onmouseover、onmouseout、onmouseenter、onmouseleave、鼠标的按键、 div简单拖拽
鼠标事件: onclick:在鼠标左健点击弹起之后触发的事件,即一次完整的鼠标点击过程.过程完成瞬间触发函数. onmousedown:事件会在鼠标按键被按下时发生. onmo ...
JavaScript中的拖拽事件且限制出界
JavaScript中的拖拽事件限制出界 JavaScript事件中很多都会用到拖拽,而在现实中很多拖拽是会限制在浏览器界面禁止出界的,下面是封装好的限制出界的拖拽事件. function drag( ...
拖拽生成html页面,简单拖拽即生成网页 VvvebJs
原标题:简单拖拽即生成网页 VvvebJs 导读VvvebJs是一个开源的网页拖拽自动生成的Java库,你可以以简单拖拽的方式生成自己需要的网页样式,内置jquery和Bootstrap,你可以拖拽相 ...
JavaScript实现鼠标拖拽效果
JavaScript实现鼠标拖拽效果前几篇博客一直在讲鼠标的移动事件相关的效果,今天再来讲一讲如何利用鼠标事件实现拖拽div块移动的效果.效果如图: HTML代码: <div id=" ...
JavaScript实现鼠标拖拽登录框
拖拽的本质是登录框获得光标的偏移来调整自身的偏移. 拖拽发生时,光标相对盒子的坐标不会变化,相对于页面的坐标却在变化,二者的差值就是盒子需要的. 两个注意点: 1. 赋值给盒子的什么属性 outer. ...
javascript简单拖拽效果
clientX,Y,鼠标的位置 document.documentElement.clientWidth:获取可视区域的宽度 document.documentElement.clientHeight ...
unity图片拖不进去_Unity UGUI实现简单拖拽图片功能
这一篇博客我们来使用 UGUI 实现图片的拖拽功能. 说到拖拽,那必然离不开坐标,UGUI 的坐标有点不一样,它有两种坐标,一种是屏幕坐标,还有一种就是 UI 在Canvas内的坐标(暂时叫做ugui ...
javascript --- 原生的拖拽功能实现
准备一个方块: <style>.drag{background-color:#aaf;position:absolute;} </style> <div class=&q ...

JavaScript实现简单拖拽框

代码如下：

效果：

JavaScript实现简单拖拽框相关推荐

最新文章

热门文章