创建一个可以拖拽移动的div

最新推荐文章于 2023-08-09 16:08:28 发布

伍文亮

最新推荐文章于 2023-08-09 16:08:28 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：基础文章标签： CSS 鼠标事件

本文链接：https://blog.youkuaiyun.com/weixin_44963070/article/details/98754655

基础专栏收录该内容

2 篇文章

订阅专栏

本文详细解析了如何使用原生JavaScript实现一个可拖拽的DIV元素。从HTML结构搭建、CSS样式设定，到利用鼠标事件完成DIV的移动，文章逐步介绍了offsetX、offsetY、pageX、pageY等关键属性的运用，以及解决边界问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个其实是一道面试题
我们今天可以看看,并且进行思路分析

思路:

	1 一个可以移动的div ,他必须是脱离文本流的吧;脱离文档流有很多方法
	最常用的就是定位
    2 可以拖拽移动,那么鼠标的 down  move up事件肯定也要有
    3 坐标肯定也要拿到,一般都是e事件(后面会讲)
    4 开始做 一边做 一边修改(后面会遇到在各种各样预想不到问题)

首先随便是创建一个div (设置样式的时候要脱离文档流)
按下! 然后Tab一键生成html
在body里面写一个开机标签就行了 (
别问我为什是块级标签,块级元素才能设置宽高)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My Move</title>
</head>
<body>
	<div><div/>
</body>
</html>

接下来就可以开始创建一个div了
因为代码量很少我就把它们都写在同一个文件里面了
样式部分

<style>
  *{
    margin:0;
    padding:0;
  }
  div{
    width:100px;
    height:100px;
    border:1px solid green;
    background-color: green;
    position:absolute;
  }
</style>

这样就生成这个:
在浏览器的最左上角生成绿色的正方形(就截图了一点)

接着就是重点了 JS部分
现在可以想一下大致的结构(原生方法)
大致的鼠标事件的结构:
(我的选择的获取方法是TagName,这个兼容性强一点,但要记住,这个选出来和querySelectAll一样都是类数组,所以最好加上下标)

<script>
  var div = document.getElementsByTagName('div')[0];
  console.log(div);
  div.onmousedown = function (e) {
    console.log('down')
    console.log(e)
    div.onmousemove = function (e) {
      console.log('move')
      div.onmouseup = function (e) {
        console.log('up')
        //鼠标事件清除,运行一次就清除掉,这样就不会影响下一次运行
        div.onmousemove = null
      }
    }
  }
</script>

这是基本结构鼠标时间的排版哦 ;没看懂的朋友多去百度并写一写很快就能看懂了
还有就是这个e变量这个是浏览器的事件是一个很泛指的东西指向所有事件你也可以写b c v 等等都可以如果不懂在onmousedown函数里面打印一下就是知道了
打印的这个e是一个大的对象
思路2:

	1  了解 offsetX  offsetY 和pageX  pageY 这几个属性(这几个属性名不懂
	一定要自己去百度)
	2  每次移动 都要把新的坐标赋值给原来的div,这样才能保证div的移动的视觉效果

然后就要开始写代码了
思路:
分别获得
offsetX offsetY 和pageX pageY他们的值
并且让 pageX-offsetX 得到正确的div的坐标
让 pageY-offsetY 得到正确的div的坐标
有人觉得为什么要这么麻烦因为一个正放心的坐标是什么
没错 : 在左上角但是我们不可能你每次都在左上角 ,如果点击的地方不是左上角
div会自动给你跳到左上角这个就很恐怖了
所以才需要精确地计算它的页面坐标 - 点击坐标 = 左上角的div坐标完整代码

<script>
var div = document.getElementsByTagName('div')[0];
console.log(div);
div.onmousedown = function (e) {
 console.log(e)
 var x = e.offsetX
 var y = e.offsetY
 console.log(x, y)
 div.onmousemove = function (e) {
   //主要逻辑就是下面两行代码 
   //将得到的坐标值 赋值给div
   div.style.top = e.pageY - y + 'px';
   div.style.left = e.pageX - x + 'px';
   console.log(e.pageX, e.pageY)
   div.onmouseup = function (e) {
     //鼠标事件清除,运行一次就清除掉,这样就不会影响下一次运行
     div.onmousemove = null
   }
 }
}
</script>

到这里你以为就结束了吗 ?
哼 ! 天真
实际操作中我们发现如果div移动到边框然后再突然出现在页面的其他位置
div的一系列鼠标事件就不能结束了除非你把鼠标重新放回div上
为什么呢 ?
把div换成document就ok了现在知道为什么把?

<script>
  var div = document.getElementsByTagName('div')[0];
  console.log(div);
  div.onmousedown = function (e) {
    console.log(e)
    var x = e.offsetX
    var y = e.offsetY
    console.log(x, y)
    document.onmousemove = function (e) {
      //主要逻辑就是下面两行代码 
      //将得到的坐标值 赋值给div
      div.style.top = e.pageY - y + 'px';
      div.style.left = e.pageX - x + 'px';
      console.log(e.pageX, e.pageY)
      document.onmouseup = function (e) {
        //鼠标事件清除,运行一次就清除掉,这样就不会影响下一次运行
        document.onmousemove = null
      }
    }
  }
</script>

完结撒花