搜索热点


Chapter9——H5中的拖放API

何轩伟 2023-12-11 345 12/11
课后拓展任务:
利用HTML5拖放API:有一个表格,表头不能被拖动,一行为一条记录,当拖动该行任意的一个单元格,整行(整个记录)移动,利用parentNode来捕获该整行记录和insertBefore来插入到被拖放的两行之间。

拖放功能及事件详解

拖放(Drag and Drop)是一种常见的交互方式,允许用户通过鼠标拖动元素到一个指定的位置或目标。为了实现这一功能,HTML5提供了原生的拖放API。

被拖动元素

要使一个元素可拖动,需要设置其dragable为true

<div draggable="true">我可以被拖动</div>

被拖动元素的几个事件

1.dragstart: 当用户开始拖动元素时触发。(只触发一次)

element.addEventListener('dragstart', function(event) {

// 你可以在这里设置一些数据或初始化操作

event.dataTransfer.setData('text/plain', '这是我的数据');

});

2.drag: 当元素正在被拖动时触发。(拖动时一直被触发)

element.addEventListener('drag', function(event) {

// 可以在这里更新元素的位置或其他属性

});

3.dragend: 当用户停止拖动元素时触发。(只触发一次)

element.addEventListener('dragend', function(event) {

// 清理操作或结束的操作可以在这里进行

});

实例演示

<!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>

这个页面定义两个id不同的div,分别为灰色和黄色背景,并且演示了拖放API的使用:

  • 当拖动开始时触发,控制台输出"开始拖动"。
  • 当拖动结束时触发,控制台输出"结束拖动"。
  • 当元素被拖动时触发,更改文档的标题为当前鼠标的位置(clientX和clientY)。

演示视频效果见网站

Chapter9——H5中的拖放API

目标(释放区)

目标区域是用户释放或放置拖动元素的区域。

目标区域的事件

  1. dragenter: 当拖动的元素进入目标区域时触发。
  2. dragover: 当拖动的元素在目标区域来回移动时触发。
  3. drop: 当用户在目标区域释放拖动的元素时触发。这是你实际处理元素放置逻辑的地方。
  4. dragleave: 当拖动的元素离开目标区域时触发。可以用于一些清理操作或状态更改。

实例演示

<!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>

这段HTML代码的主要功能是实现拖放操作。通过JavaScript和HTML5的拖放API,可以拖动一个div元素(id为"source")并放置到另一个div元素(id为"target")内。下面是对这段代码各个部分的详细说明:

Chapter9——H5中的拖放API

通过这段代码,你可以将id为"source"的元素拖动到id为"target"的元素内,并在不同的操作阶段(进入、在内部移动、放置、离开)在控制台查看相应的消息。同时,你也可以通过查看文档的标题来查看当前鼠标的位置。(演示视频效果见网站)

Chapter9——H5中的拖放API

根据上述演示,我们知道了在使用拖放API时,在dragstart就想好需要做什么在dragenter和dragover阻止默认行为(让元素可以拖动到目标区域)。然后在drop时,就要对所想做的事情编写代码并完成。

 

利用dataTransfer对象传递数据

dataTransfer对象可以在拖放操作中存储和传递数据。当数据量较大时,可以使用JSON来序列化和传递数据。这样可以确保数据的完整性和结构不会被丢失。例如,可以将一个对象转换为JSON字符串,然后使用dataTransfer.setData存储,最后在drop事件处理器中再将其转换回对象。这种方法在处理复杂数据时特别有用。

实例演示

<!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>

拖入后效果演示:

Chapter9——H5中的拖放API

Chapter9——H5中的拖放API

 

- THE END -
Tag:
最后修改:2023年12月11日
3

非特殊说明,本博所有文章均为博主原创。