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

最新推荐文章于 2025-04-11 13:51:40 发布

十方魔

最新推荐文章于 2025-04-11 13:51:40 发布

阅读量1.8k

点赞数 2

分类专栏：前端/Javascript 前端/HTML

本文链接：https://blog.csdn.net/github_36487770/article/details/80077294

版权

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

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

- - 题目
  - 思路
  - 代码
  - 效果图
  - 拖拽库
  - 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>
</bod