在 HTML 中拖放-html教程-PHP中文网

拖放事件

HTML 中拖放的语法

HTML 中的拖放示例

示例 #3

结论

首页

web前端

html教程

在 HTML 中拖放

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:38 PM

html html5 HTML Tutorial HTML Properties HTML tags

以下文章提供了 HTML 中拖放的概述。拖放是最新的功能，因其方便的功能模式而在网页中手动提供输入而闻名。拖放方法可以描述为用户从源字段的项目列表中选择特定数据/选项，将其拖放到目标字段中的过程。它是使用文档对象模型以及来自 HTML 网页的多个鼠标事件来实现的。此功能中使用的各种事件有：drag、dragstart、dragleave、dragenter、dragover、drop、dragend 和drag exit。

拖放事件

最新的拖放（dnd）功能中包含多个事件；下面我们一一看看：

Sr. No	Events	Details Description
1	Drag	To drag entity(element or text) when the mouse is moved with the element to be dragged.
2	Dragstart	The very first step in drag and drop is dragstart. It gets executed when the user is going to start with dragging the object to the required location.
3	Dragenter	Dragenter event is used when the mouse is getting hover on the target element.
4	Dragleave	This event is used when the user releases a mouse from an element.
5	Dragover	This event occurs when a mouse is used to over an element.
6	Drop	This event is used at the end of the drag and drop process for drop element operation.
7	Dragend	This is one of the most important event in this process for releasing the mouse button from the element to complete the drag procedure.
8	Dragexit	This event status that the element is no longer in the drag process of urgent target selection of element.

让我们看看一些将要进行拖放操作的数据属性：

dataTransfer.dropEffect [ = value ]: 该属性用于显示当前正在进行哪个操作。可以将其设置为替换已选择的操作。其中包含的值例如副本、链接、无或移动。
dataTransfer.effectAllowed [ = value ]: 任何允许的操作都会通过该属性返回。还可以设置更改已选择的操作。
dataTransfer.files：该数据属性用于获取要拖动的文件的fileList。
dataTransfer.addElement(element): 用于将已经存在的元素插入到可用于渲染拖动反馈的其他元素列表中。
dataTransfer.setDragImage(element, x, y): 此属性与上面的有点相同，用于更新拖动反馈并帮助更改已存在的反馈
dataTransfer.clearData ( [ format ] ): 它帮助用户从已经定义的格式中删除数据。如果用户省略参数，IT 将删除所有数据。
dataTransfer.setData(format, data): 这是用于添加指定数据的流行属性之一。
data = dataTransfer.getData(format): 拖拽操作中该属性用于提取指定数据。如果没有与之相同的数据，则返回空字符串。

HTML 中拖放的语法

以下是定义拖放语法的几个步骤：

选择要拖动的对象：为其设置属性 true。

<element draggable="true">

登录后复制

开始拖动对象：

function dragStart(ev){}

登录后复制

放下对象：

function dragDrop(ev){}

登录后复制

HTML 中的拖放示例

以下示例将展示拖放操作在 HTML 中的具体执行方式。

示例#1

代码：

<html>
<head>
<title>Drag and Drop Demo</title>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function dragStart(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function dragDrop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<style>
#box {
margin: auto;
width: 30%;
width: 21%;
height:150px;
border: 2px solid blue;
padding: 2px;
}
#square1, #square2, #square3 {
float: left;
margin: 5px;
padding: 10px;
}
#square1 {
width: 30px;
height: 30px;
background-color: #BEA7CC;
}
#square2 {
width: 60px;
height: 60px;
background-color: #B5D5F5;
}
#square3 {
width: 90px;
height: 90px;
background-color:#F5B5C5 ;
}
h2 {
font-size:20px;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<h2>HTML DRAG AND DROP DEMO</h2>
<div id = "box">
<div id="square1" draggable="true"ondragstart="dragStart(event)"></div>
<div id="square2" draggable="true"ondragstart="dragStart(event)"></div>
<div id="square3" ondrop="dragDrop(event)" ondragover="allowDrop(event)"></div>
</div>
</body>
</html>

登录后复制

输出：

拖放之前，选项输出将如下所示：

在 HTML 中拖放

执行拖放操作后，输出如下：

在 HTML 中拖放

示例#2

这里我们将看到另一个示例，其中我们将图像从一个位置移动到另一个指定位置，如下代码所示。

代码：

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function dragStart(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function dragDrop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<style>
.divfirst {
width: 250px;
height: 150px;
padding: 10px;
border: 1px solid black;
background-color: #F5F5F5;
}
p {
font-size:20px;
font-weight:bold;
}
</style>
</head>
<body>
<p>Image Drag and Drop Demo</p>
<div class="divfirst" ondrop="dragDrop(event)" ondragover="allowDrop(event)">
<img id="drag1"
src="Jerry.jpeg" draggable="true"
ondragstart="dragStart(event)" width="250" height="150"></div>
<br>
<div     class= "divfirst"ondrop="dragDrop(event)"
ondragover="allowDrop(event)"></div>
</body>
</html>

登录后复制

输出：

拖放操作之前，输出为：

在 HTML 中拖放

拖放操作完成后，将如下所示：

在 HTML 中拖放

示例 #3

在此示例中，我们将了解如何将文件拖放到指定位置：

代码：

<body>
<div id="filedemo" style="min-height: 150px; border: 1px solid black;"
ondragenter="document.getElementById('output').textContent = ''; event.stopPropagation(); event.preventDefault();"
ondragover="event.stopPropagation(); event.preventDefault();"
ondrop="event.stopPropagation(); event.preventDefault();
dodrop(event);">
DROP FILES HERE...
</div>
<script>
function dodrop(event)
{
var dt = event.dataTransfer;
var files = dt.files;
for (var i = 0; i < files.length; i++) {
output(" File " + i + ":\n(" + (typeof files[i]) + ") : <" + files[i] + " > " +
files[i].name + " " );
}
}
function output(text)
{
document.getElementById("filedemo").textContent += text;
}
</script>
</body>

登录后复制

输出：

在 HTML 中拖放