如何使用HTML5实现拖放单个元素
yund56 2025-04-26 20:22 15 浏览
如何使用HTML5实现拖放单个元素？本篇文章将给大家介绍关于实现拖放HTML元素的JavaScript代码，下面一起来看具体的实现内容。
通过使用HTML5的拖放功能，您可以拖放HTML页面元素
我们来看具体的示例
代码如下
SimpleDragDrop.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="SimpleDragDrop.css" />
<script>
function load() {
var box = document.querySelector('.box');
box.addEventListener('dragstart', onDragStart, false);
var zone = document.querySelector('.dropzone');
zone.addEventListener('dragover', onDragOver, false);
zone.addEventListener('drop', onDrop, false);
}
function onDragStart(e) {
e.dataTransfer.setData('text', this.id);
}
function onDragOver(e) {
e.preventDefault();
this.textContent = 'onDragOver';
}
function onDrop(e) {
e.preventDefault();
this.textContent = 'onDrop';
}
</script>
</head>
<body onload="load();">
<div class="box" draggable="true"></div>
<div id="dropzone" class="dropzone">
</div>
</body>
</html>
SimpleDragDrop.css
.box {
width:32px;
height:32px;
border:solid 1px #002f9f;
}
.dropzone {
margin-top:16px;
margin-bottom:16px;
width: 280px;
height: 64px;
border: solid 1px #808080;
}
说明：
<div class="box" draggable="true"></div>
<div id="dropzone" class="dropzone"></div>
页面上显示两个上述的div，可以使用class =“box”，id =“dropzone”拖动的对象是放置接受区域的div。对于可拖动对象，可以将draggable =“true”设置为可拖动对象。
function load() {
var box = document.querySelector('.box');
box.addEventListener('dragstart', onDragStart, false);
var zone = document.querySelector('.dropzone');
zone.addEventListener('dragover', onDragOver, false);
zone.addEventListener('drop', onDrop, false);
}
function onDragStart(e) {
e.dataTransfer.setData('text', this.id);
}
function onDragOver(e) {
e.preventDefault();
this.textContent = 'onDragOver';
}
function onDrop(e) {
e.preventDefault();
this.textContent = 'onDrop';
}
上面的代码为每个元素分配拖放事件。
对于要拖动的元素，我们设置“dragstart”事件。启动拖动时，将执行onDragStart函数。
对于要删除的元素，设置“dragover”“drop”事件。当拖动的元素进入拖放区域，onDragOver功能被执行，当元件被丢弃onDrop功能将被执行。
在dragstart的情况下，你必须编写代码来设置dataTransfer对象的值。它不使用插入dataTransfer中的值，但是如果没有这个代码的话，在没有数据的情况下也会实现。
运行结果
使用Web浏览器显示上述HTML文件。将显示如下所示的效果。
拖动顶部的方框。如果将其拖动到底部框架，框架中将显示“onDragOver”。
将其放在框架中时，框架中会显示“onDrop”字符。
示例2：添加了事件的拖放元素的方法
代码如下
SimpleDragDrop2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="SimpleDragDrop2.css" />
<script>
function load() {
var box = document.querySelector('.box');
box.addEventListener('dragstart', onDragStart, false);
box.addEventListener('dragend', onDragEnd, false);
var box = document.querySelector('.dropzone');
box.addEventListener('dragenter', onDragEnter, false);
box.addEventListener('dragover', onDragOver, false);
box.addEventListener('dragleave', onDragLeave, false);
box.addEventListener('drop', onDrop, false);
}
function onDragStart(e) {
e.dataTransfer.setData('Text', this.id);
this.textContent = 'onDragStart';
}
function onDragEnd(e) {
this.textContent = 'onDragEnd';
}
function onDragEnter(e) {
this.textContent = 'onDragEnter';
}
function onDragOver(e) {
e.preventDefault();
this.textContent = 'onDragOver';
}
function onDragLeave(e) {
this.textContent = 'onDragLeave';
}
function onDrop(e) {
e.preventDefault();
this.textContent = 'onDrop';
}
</script>
</head>
<body onload="load();">
<div id="box" class="box" draggable="true"></div>
<div id="dropzone" class="dropzone"></div>
</body>
</html>
SimpleDragDrop.css
.box {
width:32px;
height:32px;
border:solid 1px #d01313;
}
.dropzone {
margin-top:16px;
margin-bottom:16px;
width: 280px;
height: 64px;
border: solid 1px #808080;
}
说明：
<div class="box" draggable="true"></div>
<div id="dropzone" class="dropzone"></div>
如上例所示，页面上显示两页DIV。对于可拖动对象，请将draggable =“true”设置为可拖动对象。
function load() {
var box = document.querySelector('.box');
box.addEventListener('dragstart', onDragStart, false);
box.addEventListener('dragend', onDragEnd, false);
var box = document.querySelector('.dropzone');
box.addEventListener('dragenter', onDragEnter, false);
box.addEventListener('dragover', onDragOver, false);
box.addEventListener('dragleave', onDragLeave, false);
box.addEventListener('drop', onDrop, false);
}
function onDragStart(e) {
e.dataTransfer.setData('Text', this.id);
this.textContent = 'onDragStart';
}
function onDragEnd(e) {
this.textContent = 'onDragEnd';
}
function onDragEnter(e) {
this.textContent = 'onDragEnter';
}
function onDragOver(e) {
e.preventDefault();
this.textContent = 'onDragOver';
}
function onDragLeave(e) {
this.textContent = 'onDragLeave';
}
function onDrop(e) {
e.preventDefault();
this.textContent = 'onDrop';
}
上面的代码为每个元素分配拖放事件。
“dragstart”和“dragend”事件被分配给拖动侧的元素。一旦开始拖动，调用ondstart函数，拖动结束后，将被调用ondos agEs函数。
“dragenter”，“dragover”，“dragleave”和“drop”事件被分配给要拖动的元素。当拖动的元素进入拖放区域，执行onDragEnter函数的功能，在拖拽区域内拖动的状态下执行onDragOver函数，从拖拽的区域出来的话，将执行OnDragLeave函数。下拉拖动的元素时，将执行onDrop函数。
运行结果
使用Web浏览器显示上述HTML文件。将显示如下所示的效果。
拖动红色区域的方形区域。字符“onDragStart”显示在该区域中。
当你松开拖动时，你会看到“onDragEnd”的角色红框中的区域。
再次拖动红框区域。当拖放到底部区域时，在放置区域中显示字符“onDragOver”。
当你放开拖到拖放区域红框的区域，你会看到“onDrop”的字符在底部区域中。
再次拖动红框以与放置区域重叠。将显示“onDragOver”字符。
拖动红框并将其拖动到拖放区域之外。放置区域中的字符显示变为“onDragLeave”。
以上就是如何使用HTML5实现拖放单个元素的详细内容，更多请关注其它相关文章！
更多技巧请《转发 + 关注》哦！
相关推荐
- 了解计算机网络90个常见概念
-
计算机网络系列篇第一篇:90个常见概念定义如下:主机：计算机网络上任何一种能够连接网络的设备都被称为主机或者说端系统，比如手机、平板电脑、电视、游戏机、汽车等，随着5G的到来，将会有越来越多的终...
- 数控技巧:数控常用工艺术语(英文名称)
-
1工艺基本概念1.1一般概念1.1.1数控加工：numericalcontrolmachining根据被加工零件图样和工艺要求，编制成以数码表示的程序输入到机床的数控装置或控制计算机中，以...
- 常用模具零件广东术语，不会怎么混天下?
-
广东属最早引进模具工业地方之一,在工业界模具被称为永不衰败的行业,由于各师各法,广东各地对模具称呼的术语很多,有些不知怎译!!!为方便大家对模具术语交流，小编给大家整理了模具零件在广东的常用术语。深圳...
- 开发人员自我提升 - 软件开发技术术语表
-
开发工具与环境IDE(集成开发环境)VisualStudioCodeIntelliJIDEAEclipsePyCharmVersionControl(版本控制)GitSVNMercuria...
- 程序员术语趣味解释(1)
-
1.hotfixhotfix通常指的是一种紧急修复措施，用于解决已知的、严重的问题，比如安全漏洞、程序崩溃等。hotfix并不会包含任何新的功能或升级，它只是一个小型的程序补丁，能够快速而且有针对性地...
- 挑战 50 年霸主 C 语言:新语言 Hare，“异端”中的保守派
-
Hare原意为野兔，它的开发者希望这种编程语言能够如野兔般拥有顽强的生命力。本周，软件开发者DrewDeVault公布了一种名为Hare的全新系统编程语言，并用“简单、稳定和健壮”作为核心...
- Python必须掌握的核心术语和概念，涵盖语法、编程范式和常用工具
-
以下是学习**Python**必须掌握的核心术语和概念，涵盖语法、编程范式和常用工具：---###**一、基础语法**1.**变量（Variable）**-存储数据的容器，无需声明类型，如...
- 编程中最难的事:如何命名
-
如何命名，其实是编程中最难的事。乔治·奥威尔的命名规范如何命名？简言之，根据语意来选择词汇，别无它法……然而，有时我们会不知用什么词汇更合适。当你想到某个抽象的东西，你更倾向于最先想到的词语，除非你故...
- 计算机网络的 166 个核心概念，你知道吗?
-
上回我整理了一下计算机网络中所有的关键概念，很多小伙伴觉得很有帮助，但是有一个需要优化的点就是这些概念不知道出自哪里，所以理解起来像是在云里穿梭，一会儿在聊应用层的概念，一会儿又跑到网络层协议了。针对...
- 黑客主要术语?什么是木马?什么是肉鸡?
-
本节将对常见的一些黑客术语进行简单的介绍1.肉鸡所谓肉鸡是一种很形象的比喻，比喻那些可以随意被控制的电脑，对方可以是各种电脑包括但不限于个人电脑，服务器等，在某种情况黑客进攻时会用他们干扰敌人。对直接...
- 计算机网络的 89 个核心概念
-
计算机网络中的概念也是非常庞杂，理解起来比较困难，所以这里，我给大家汇总了计算机网络中89个常见的概念，希望对你有所帮助。主机：计算机网络上任何一种能够连接网络的设备都被称为主机或者说端系统，比如...
- 开发人员自我提升 - 软件开发专业术语表
-
AAbstractClass(抽象类)-一种不能被实例化的类，用作其他类的模板Agile(敏捷开发)-一种迭代的软件开发方法论Algorithm(算法)-解决特定问题的一系列明确的...
- Python编程术语词汇表(一)
-
这是一个非官方的Python编程术语表，是日常编程实践以及网络收藏所得的内容集合。Iteration迭代Loopingoveraniterableobject.遍历可迭代对象。Afor...
- 计算机领域有哪些高大上的术语描述的是很简单的事物?
-
云计算说白了就是服务器租赁，服务器在网线另一头，你也不用知道具体在哪，如远在天边的云。好比你想打网页小游戏，只想玩一次。你不会为此买个电脑、耳麦，再开通个宽带。你可能会去网吧，按时付费。网吧有按小时...
- AI能代替你阅读吗
-
来源：科技日报原标题：AI能代替你阅读吗信息爆炸的当下，高校学生的阅读场景正经历着颠覆性变革——借助AI工具，他们不仅可以快速拓展通识阅读知识面，还可以轻松完成课堂上的深度思考作业，不用翻开书页就能...
- 一周热门
- 最近发表
- 标签列表
-
- filter函数js (37)
- filter函数excel用不了 (73)
- 商城开发 (40)
- 影视网站免费源码最新版 (57)
- 影视资源api接口 (46)
- 网站留言板代码大全 (56)
- java版软件下载 (52)
- java教材电子课本下载 (48)
- java技术的电子书去哪看 (33)
- 0基础编程从什么开始学 (50)
- java是用来干嘛的 (51)
- it入门应该学什么 (55)
- java线上课程 (55)
- 学java的软件叫什么软件 (38)
- 程序开发软件有哪些 (53)
- 软件培训 (59)
- 机器人编程代码大全 (50)
- 少儿编程教程免费 (45)
- 新代系统编程教学 (61)
- 共创世界编程网站 (38)
- 最容易入门的编程语言 (33)
- 亲测源码 (36)
- tan sin cos 图 (33)
- 三角函数积分公式表 (35)
- 函数的表示方法 (34)