js实现简单div拖拽功能实例

下面是关于如何用 JavaScript 实现简单的 div 拖拽功能的攻略。

1. HTML 结构

首先，在 HTML 中需要先定义要拖拽的 div 元素，代码如下：

<div id="draggable">
  <!-- 这里可以放置需要拖拽的内容 -->
</div>

2. CSS 样式

接着，为这个 div 元素设置样式，使其能够被拖拽，代码如下：

#draggable {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background-color: red;
  cursor: move;
}

关键点：position 属性需要设置为 absolute，同时为了能够通过 left 和 top 移动元素，这两个属性应设置为 0。

3. JavaScript 功能

最后，我们需要实现 div 拖拽的功能，代码如下：

var div = document.getElementById('draggable');
var dragging = false;
var offset = {x: 0, y: 0};

// 鼠标按下事件：记录位置和状态
div.addEventListener('mousedown', function(e) {
  offset.x = e.offsetX;
  offset.y = e.offsetY;
  dragging = true;
});

// 鼠标松开事件：更新状态
div.addEventListener('mouseup', function() {
  dragging = false;
});

// 鼠标移动事件：更新位置
document.addEventListener('mousemove', function(e) {
  if (dragging) {
    div.style.left = e.clientX - offset.x + 'px';
    div.style.top = e.clientY - offset.y + 'px';
  }
});

代码说明：

通过 document.getElementById() 获取到要拖拽的 div 元素
定义 dragging 和 offset 两个变量，分别表示是否被拖拽和元素的位置偏移量
监听鼠标按下事件，记录当前鼠标在 div 上的位置和状态，如果鼠标在 div 上按下，dragging 设置为 true
监听鼠标松开事件，如果鼠标在 div 上松开，dragging 设置为 false
监听鼠标移动事件，如果 dragging 为 true，则根据鼠标在屏幕上的位置和偏移量计算出 div 的新位置，并更新其 left 和 top 属性

4. 示例

下面是两个示例，分别演示了最基本的 div 拖拽和添加了限制范围的拖拽效果。

示例一：最基本的 div 拖拽

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>最基本的 div 拖拽</title>
  <style>
    #draggable {
      position: absolute;
      left: 0;
      top: 0;
      width: 100px;
      height: 100px;
      background-color: red;
      cursor: move;
    }
  </style>
</head>
<body>
  <div id="draggable"></div>
  <script>
    var div = document.getElementById('draggable');
    var dragging = false;
    var offset = {x: 0, y: 0};

    div.addEventListener('mousedown', function(e) {
      offset.x = e.offsetX;
      offset.y = e.offsetY;
      dragging = true;
    });

    div.addEventListener('mouseup', function() {
      dragging = false;
    });

    document.addEventListener('mousemove', function(e) {
      if (dragging) {
        div.style.left = e.clientX - offset.x + 'px';
        div.style.top = e.clientY - offset.y + 'px';
      }
    });
  </script>
</body>
</html>

示例二：限制拖拽范围

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>限制 div 拖拽范围</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      height: 100vh;
    }

    #container {
      position: relative;
      height: 100%;
    }

    #draggable {
      position: absolute;
      left: 0;
      top: 0;
      width: 100px;
      height: 100px;
      background-color: red;
      cursor: move;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="draggable"></div>
  </div>
  <script>
    var container = document.getElementById('container');
    var div = document.getElementById('draggable');
    var dragging = false;
    var offset = {x: 0, y: 0};

    div.addEventListener('mousedown', function(e) {
      offset.x = e.offsetX;
      offset.y = e.offsetY;
      dragging = true;
    });

    div.addEventListener('mouseup', function() {
      dragging = false;
    });

    document.addEventListener('mousemove', function(e) {
      if (dragging) {
        var left = e.clientX - offset.x;
        var top = e.clientY - offset.y;
        var maxLeft = container.offsetWidth - div.offsetWidth;
        var maxTop = container.offsetHeight - div.offsetHeight;
        left = Math.min(Math.max(0, left), maxLeft);
        top = Math.min(Math.max(0, top), maxTop);
        div.style.left = left + 'px';
        div.style.top = top + 'px';
      }
    });
  </script>
</body>
</html>