原生实现html5的拖拽功能 drag and drop

最新推荐文章于 2025-09-20 00:13:50 发布

原创

最新推荐文章于 2025-09-20 00:13:50 发布 · 1.8k 阅读

5 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用HTML5原生事件来实现拖拽功能，通过mousedown、mousemove和mouseup事件模拟dragstart、drag和drop过程。在拖拽过程中，当被拖拽元素进入目标区域时，改变目标区域的背景颜色。文章还提到了一些拖拽库如jQuery UI和dnd.js，以及推荐了深入理解HTML5 Drag & Drop API的文章链接。

- - 题目
  - 思路
  - 代码
  - 效果图
  - 拖拽库
  - HTML5的拖拽API

题目

页面内有一个正方形元素 A 以及一个待放置区域 B，实现对其拖拽和放下到 B 区域内，并且改变 B 区域背景颜色 (不可用 html5 原生事件)。

这也是一道腾讯面试题，要求远程编程。

思路

用鼠标的mousedown事件来模拟dragstart
用持续的mousedown事件来模拟drag过程，用event的坐标来改变相关element的坐标
经试验，H5原生是以被拖拽元素在容器元素中的面积达到一半时可以触发drop（待确认），简易版的就不算面积了，以鼠标进入容器中为准，用mouseup事件作为触发条件模拟drop

代码

html部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <link rel="stylesheet" type="text/css" href="demo.css" />
</head>

<body>
  <div id="div1"></div>
  <div id="div2"></div>

  <script src="demo.js"></script>
</body>