javascript拖动例子

封面图 • 2026-01-09 • JavaScript

下面是一个简单的 **JavaScript 拖动（Drag and Drop）示例**，使用原生的 HTML 和 JavaScript 实现。这个例子中，你可以拖动一个元素到另一个区域。

---

### ✅ 示例：可拖动的元素

```html
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 拖动示例</title>
  <style>
    #dragBox {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      border: 2px solid #333;
      cursor: move;
    }

#dropZone {
      width: 300px;
      height: 200px;
      border: 2px dashed #999;
      margin-top: 20px;
      padding: 10px;
      text-align: center;
    }
  </style>
</head>
<body>

// 拖动开始时
    dragBox.addEventListener('dragstart', function (event) {
      event.dataTransfer.setData('text/plain', this.id); // 设置拖拽数据
    });

// 拖动进入目标区域时
    dropZone.addEventListener('dragover', function (event) {
      event.preventDefault(); // 防止默认行为（允许放置）
    });

// 放置时
    dropZone.addEventListener('drop', function (event) {
      event.preventDefault();
      const data = event.dataTransfer.getData('text/plain'); // 获取拖拽的数据
      const draggedElement = document.getElementById(data);
      this.appendChild(draggedElement);
    });
  </script>

</body>
</html>
```

---

### 📝 功能说明：

- `draggable="true"`：让元素可以被拖动。
- `dragstart`：当用户开始拖动元素时触发。
- `dragover`：当拖动的元素在目标区域上方时触发（需要 `preventDefault()` 才能接受放置）。
- `drop`：当元素被放置在目标区域时触发。
- `dataTransfer.setData()`：设置拖动时传递的数据。
- `dataTransfer.getData()`：获取拖动时传递的数据。

---

### 📦 如果你想用更高级的功能（比如拖动排序、拖动图片等），可以使用 [jQuery UI Draggable](https://jqueryui.com/draggable/) 或 [HTML5 Drag API](https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API)。

---

如果你有特定需求（如拖动排序、拖动到其他元素、拖动图片等），欢迎告诉我，我可以提供更详细的代码！