利用HTML5拖放API：有一个表格，表头不能被拖动，一行为一条记录，当拖动该行任意的一个单元格，整行（整个记录）移动，利用parentNode来捕获该整行记录和insertBefore来插入到被拖放的两行之间。
拖放功能及事件详解
拖放（Drag and Drop）是一种常见的交互方式，允许用户通过鼠标拖动元素到一个指定的位置或目标。为了实现这一功能，HTML5提供了原生的拖放API。
被拖动元素
要使一个元素可拖动，需要设置其dragable为true
[qzdypre]
<div draggable="true">我可以被拖动</div>
[/qzdypre]
被拖动元素的几个事件
1.dragstart: 当用户开始拖动元素时触发。（只触发一次）
[qzdypre]
element.addEventListener('dragstart', function(event) {
// 你可以在这里设置一些数据或初始化操作
event.dataTransfer.setData('text/plain', '这是我的数据');
});
[/qzdypre]
2.drag: 当元素正在被拖动时触发。（拖动时一直被触发）
[qzdypre]
element.addEventListener('drag', function(event) {
// 可以在这里更新元素的位置或其他属性
});
[/qzdypre]
3.dragend: 当用户停止拖动元素时触发。（只触发一次）
[qzdypre]
element.addEventListener('dragend', function(event) {
// 清理操作或结束的操作可以在这里进行
});
[/qzdypre]
实例演示
[qzdypre]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#source {
width: 200px;
height: 200px;
background: #EEE;
}
#target {
width: 400px;
height: 400px;
background: yellow;
}
</style>
</head>
<body>
<div id="source" draggable="true">
</div>
<div id="target">
</div>
</body>
<script>
let source = document.querySelector("#source");
source.addEventListener("dragstart", (event) => {
console.log("开始拖动");
});
source.addEventListener("dragend", (event) => {
console.log("结束拖动");
});
source.addEventListener("drag", (event) => {
document.title = event.clientX + "," + event.clientY;
});
</script>
</html>
[/qzdypre]
这个页面定义两个id不同的div，分别为灰色和黄色背景，并且演示了拖放API的使用：
- 当拖动开始时触发，控制台输出"开始拖动"。
- 当拖动结束时触发，控制台输出"结束拖动"。
- 当元素被拖动时触发，更改文档的标题为当前鼠标的位置（clientX和clientY）。
目标（释放区）
目标区域是用户释放或放置拖动元素的区域。
目标区域的事件
- dragenter: 当拖动的元素进入目标区域时触发。
- dragover: 当拖动的元素在目标区域来回移动时触发。
- drop: 当用户在目标区域释放拖动的元素时触发。这是你实际处理元素放置逻辑的地方。
- dragleave: 当拖动的元素离开目标区域时触发。可以用于一些清理操作或状态更改。
实例演示
[qzdypre]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#source {
width: 200px;
height: 200px;
background: #EEE;
}
#target {
width: 400px;
height: 400px;
background: yellow;
}
</style>
</head>
<body>
<div id="source" draggable="true">
</div>
<div id="target">
</div>
</body>
<script>
let target = document.querySelector("#target");
target.addEventListener("dragenter", (event)=>{
event.preventDefault();
console.log("进入释放区");
});
target.addEventListener("dragover", (event)=>{
event.preventDefault();
document.title=event.clientX+","+event.clientY;
});
target.addEventListener("drop",(event)=>{
console.log("拖入");
});
target.addEventListener("dragleave",(event)=>{
console.log("离开释放区");
});
</script>
</html>
[/qzdypre]
这段HTML代码的主要功能是实现拖放操作。通过JavaScript和HTML5的拖放API，可以拖动一个div元素（id为"source"）并放置到另一个div元素（id为"target"）内。下面是对这段代码各个部分的详细说明
通过这段代码，你可以将id为"source"的元素拖动到id为"target"的元素内，并在不同的操作阶段（进入、在内部移动、放置、离开）在控制台查看相应的消息。同时，你也可以通过查看文档的标题来查看当前鼠标的位置。（演示视频效果见网站）
根据上述演示，我们知道了在使用拖放API时，在dragstart就想好需要做什么。在dragenter和dragover阻止默认行为（让元素可以拖动到目标区域）。然后在drop时，就要对所想做的事情编写代码并完成。
利用dataTransfer对象传递数据
dataTransfer对象可以在拖放操作中存储和传递数据。当数据量较大时，可以使用JSON来序列化和传递数据。这样可以确保数据的完整性和结构不会被丢失。例如，可以将一个对象转换为JSON字符串，然后使用dataTransfer.setData存储，最后在drop事件处理器中再将其转换回对象。这种方法在处理复杂数据时特别有用。
实例演示
[qzdypre]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#source {
width: 200px;
height: 200px;
background: #EEEEEE;
}
#target {
width: 400px;
height: 400px;
background: yellow;
}
</style>
</head>
<body>
<div id="source"></div>
<div id="target"></div>
</body>
<script type="text/javascript">
let source = document.querySelector("#source");
let target = document.querySelector("#target");
source.addEventListener("dragstart" , (event)=>{
event.dataTransfer.setData("text", event.target.id);
});
target.ondragenter = (event)=>{
event.preventDefault();
};
target.ondragover = (event)=>{
event.preventDefault();
};
target.addEventListener("drop",(event)=>{
let source=document.getElementById(event.dataTransfer.getData("text"));
event.target.appendChild(source);
});
</script>
</html>
[/qzdypre]
文章评论