用 mouse 事件写一个可拖拽的 div

简介: 用 mouse 事件写一个可拖拽的 div

今天刷题的过程中看到一个有意思的题目,用 mouse 事件写一个可拖拽的 div,个人以为可以凭脑子想象一下就能写出来,但是很显然脑子说:啥?你说啥?写的过程中涉及 div 的绝对定位样式,鼠标的位置,还有一些差值计算,于是乎我就画了个图,图画出来以后,简直不要太清晰哦,两秒钟搞定!不多说了,下面上才艺:

精髓在于,在鼠标点击时判断鼠标在 div 内的 offsetX 和 offsetY 并保存起来,然后在鼠标移动的过程中计算 pageX 和 pageY 与 offsetX 和 offsetY 分别做差值,并将其赋值给决定定位下的 div 的 left 和 top,注意加 'px' 单位。下面是代码及效果演示:

<div id="box" style="width: 100px; height: 120px; background-color: red; position: absolute;"></div>
<script type="text/javascript">
  var box = document.getElementById('box');
  box.addEventListener('mousedown', (event) => {
    let innerBoxLeft = event.offsetX;
    let innerBoxTop = event.offsetY
    function moving(event) {
      box.style.left = (event.pageX - innerBoxLeft + 'px')
      box.style.top = (event.pageY - innerBoxTop + 'px')
    }
    document.addEventListener('mousemove', moving, false)
    document.addEventListener('mouseup', (event) => {
      document.removeEventListener('mousemove', moving)
    }, false)
  })
</script>

20200719185726742.gif

                   

目录
相关文章
|
6月前
|
开发者
移动端 click 事件、touch 事件、tap 事件的区别
移动端 click 事件、touch 事件、tap 事件的区别
32 1
|
6月前
|
JavaScript
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”,滚动条对应同步滚动
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”,滚动条对应同步滚动
|
11月前
|
API
drag事件
drag事件
88 0
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
403 1
|
前端开发 JavaScript
当鼠标聚焦时输入框变色(focus事件实例)
当鼠标聚焦时输入框变色(focus事件实例)
75 0
element-ui:多个el-dialog弹框切换会出现闪烁
element-ui:多个el-dialog弹框切换会出现闪烁
302 0
element-ui框架的el-dialog弹出框被遮罩层挡住了
element-ui框架的el-dialog弹出框被遮罩层挡住了
335 0
element-ui框架的el-dialog弹出框被遮罩层挡住了
JavaFx - 按下Button 一直触发按钮事件
JavaFx - 按下Button 一直触发按钮事件
553 0
JavaFx - 按下Button 一直触发按钮事件
|
数据可视化
UGUI系列-Button绑定事件的多种实现
今天分享一下UGUI Button绑定事件的几种方法,以及优点和缺点 有哪些地方不懂的小伙伴也可以联系我的QQ,我的QQ就在博客链接中隐藏着,看能不能找到咯