HTML5实现原生拖放的案例

之前做项目过程中遇到了一个拖放的效果实现，业务场景是为课程表手动拖拽添加课程。翻看了一下H5新增元素里面，有实现拖放的效果，于是就写了一个demo，效果如下图：
在这里插入图片描述
HTML代码：

<!-- 课程元素 -->
<div class="list">
	<div class="item blue" id="html" draggable="true" ondragstart="start(event)">HTML</div>
	<div class="item pink" id="css" draggable="true" ondragstart="start(event)">CSS</div>
	<div class="item green" id="js" draggable="true" ondragstart="start(event)">JS</div>
</div>

<!-- 要放置的区域 -->
<div id="web" ondrop="drop(event)" ondragover="toOver(event)">
	<div style="font-weight: bold;">课程表：</div>
</div>

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

<div draggable="true" />

然后，规定当元素被拖动时触发的事件，在上面的HTML代码中，ondragstart 属性调用了一个函数，start(event)，该事件方法是在拖拽元素时触发。
ondragover 事件是在要放置的区域元素上定义，当鼠标拖拽着元素在该区域上方时触发。
ondrop 事件是把元素拖拽到指定区域并松开鼠标时触发。

CSS代码：

.list {
	display: flex;
}

.item {
	width: 100px;
	height: 40px;
	margin: 10px;
	color: #fff;
	text-align: center;
	line-height: 40px;
	border-radius: 10px;
}

.blue {
	background-color: royalblue;
}

.pink {
	background-color: deeppink;
}

.green {
	background-color: forestgreen;
}

#web {
	width: 150px;
	height: 220px;
	border: 1px solid #000;
	position: absolute;
	top: 150px;
	left: 100px;
	box-sizing: border-box;
	padding: 10px;
}

CSS没什么可说的，自己看吧。

JavaScript代码：

//开始拖拽元素
function start(ev) {
	id = ev.target.id; //获取拖拽元素的ID
}

//要放置的区域
function toOver(ev) {
	ev.preventDefault(); //阻止默认事件
}

//放置元素的方法
function drop(ev) {
	var app = document.getElementById(id); // 获取拖动的元素对象
	var div = document.getElementById(ev.target.id); // 放置区域的元素对象

	div.appendChild(app); // 把拖拽对象追加到放置区域中
}

上面的JS代码要配合着HTML标签上的事件函数查看，其实，整个过程很简单：

当鼠标拖动元素时，触发 ondragstart() 事件，获取要拖动元素的ID；
当鼠标拖拽着元素放置到指定区域时，触发 ondropover() 事件，在这里要阻止默认事件的触发；
当鼠标拖拽元素到指定区域，并松开鼠标时，触发 ondrop() 事件，获取拖拽元素的对象，追加到放置区域的节点内部；

本文链接：https://blog.csdn.net/p445098355/article/details/106102377

智能推荐

HTML5之拖放

1. 常用拖放事件进行拖放操作时需要对放置的元素阻止默认行为。因为浏览器默认阻止拖放。这句通常写在dragover，dragenter，dragleave，drop绑定的事件中。 2. web API接口 DataTransfer：DataTransfer对象用于保存拖动并放下（drag and drop）过程中的数据。它可以保存一项或多项数据，这些数据项可以是一种或者多种数据类型。参考链接...

在angualr利用HTML5实现拖放与定位

Drag&&Drop 一、概述拖放的目的可以将某个对象放置到你想要放的位置拖放是一种常见的特性，比如在微信聊天室可以直接将文件或图片拖入输入框来发送信息。二、拖放实例效果：实例二：实现来回拖动p元素效果： Geolocation(地理定位) 一、概述 Geolocation用于定位用户的位置。 Geolocation通过请求一个位置信息，用户同意后，浏览器会返回一个包含...

使用HTML5的本机拖放API

每个人都喜欢一个易于使用和交互式用户界面和自推出智能手机的不断出现了来自用户的期望跳跃; 人们期望，你的网站将是直观的，将使用普遍理解的行为，并证明了整体一个简单的方法来浏览您的网站。给你的用户的能力，拖放，和排序，使您的网站更直观的人了解如何元素X移动到位置Y和在对象B的前面移动的对象A使对象A是第一位的。处理拖动，删除和排序一直是JavaScript和开发任务之前已经有建立自己的相互作用或...

html5拖放+vue+localStorage，实现拖放排序并记录到本地

html5拖放+vue+localStorage，实现拖放排序并记录到本地前言效果技术要点完整代码前言因业务需求，需要在页面上列出多个视频，并能拖放排序，且记录排序。现使用技术如下： vue + html5的drag事件实现元素拖放排序 +l ocalStorage记录到本地浏览器上，刷新页面不会重置排序。本示例为了更好的用户体验，排序后使用css3 的 translate 来变更...

[H5]HTML5拖放

[H5]HTML5拖放包括HTML中拖放和拖放本地资源。 [index.html] [indexJS.js] 示意图：...

HTML5实现原生拖放的案例

智能推荐

猜你喜欢