JS 拖拽元素

最新推荐文章于 2023-11-28 11:58:47 发布

逸川先生

最新推荐文章于 2023-11-28 11:58:47 发布

阅读量276

点赞数

文章标签： javascript 练习拖拽

本文链接：https://blog.csdn.net/qq_38238041/article/details/86822462

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

还是先上个图：

简单来讲：我们现在要做的就是将黄色方块固定，然后可以用鼠标随意拖拽红色方块

再看需求：

1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
3.当鼠标松开时，被拖拽元素固定在当前位置  onmouseup

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>鼠标拖拽元素</title>
  <link rel="stylesheet" href="drag.css">
  <script src="drag.js"></script>
</head>
<body>
  <div class="box1" id="box1"></div>
  <div class="box2"></div>
</body>
</html>

JS代码：

/**
 * Created by Barry on 2019-2-9.
 */
window.onload = function () {
  var box1 = document.getElementById('box1');

  /* 鼠标按下 */
  box1.onmousedown = function(event) {
    /* 拿到鼠标在box1的x,y */
    event = event || window.event;
    var x = event.offsetX;
    var y = event.offsetY;

    /* 鼠标开始拖拽，绑定事件，改变box1x,y */
    document.onmousemove = function(event){
      event = event || window.event;
      box1.style.top = event.clientY-y + 'px';
      box1.style.left = event.clientX-x + 'px';
    };

    /* 鼠标抬起，解绑事件 */
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
    }
  }
};

CSS代码，可以注意的是绝对定位：


.box1{
  width: 100px;
  height: 100px;
  background-color: red;

  /* 绝对定位 - 必须！ */
  position: absolute;
}

.box2{
  width: 100px;
  height: 100px;
  background-color: yellow;

  /* 绝对定位 - 必须！ */
  position: absolute;

  left: 200px;
  top: 200px;
}