prefacio
Arrastrar y soltar es una función común en la que se toma un objeto y luego se arrastra a otra ubicación. En H5, cualquier elemento admite arrastrar y soltar, pero debe tenerse en cuenta que algunos elementos tienen un comportamiento predeterminado (como un elemento) y el comportamiento predeterminado de este elemento debe cancelarse.
Use preventDefault() para cancelar la acción predeterminada del evento
evento de arrastrar y soltar
Elemento de arrastre - evento:
| evento | describir |
|---|---|
| comienzo del contrato | Se activa cuando el elemento comienza a arrastrarse: comience a arrastrar |
| inaguantable | Activado por fuente de arrastre - arrastrando |
| indiferente | La fuente de arrastre obtendrá el objeto dragend (ya sea exitoso o no) al final de la operación de arrastre - fin de arrastre |
Nota: el evento ondrag siempre se activa mientras se arrastra el elemento, como verá en los siguientes ejemplos.
Soltar elemento - evento:
| evento | describir |
|---|---|
| portador | Se activa cuando el mouse ingresa a un elemento por primera vez durante un arrastre |
| ondragover | Se activa cuando el mouse que arrastra se mueve sobre un elemento |
| ondragleave | Se activa cuando el ratón que arrastra deja el elemento |
| ondrop | Se activa cuando finaliza la operación de arrastre y se libera en el elemento soltado |
Nota: Solo los eventos relacionados se activan al arrastrar y los eventos del mouse no se activarán.
objeto de transferencia de datos
| propiedades/métodos | describir |
|---|---|
| archivos | Su propiedad devuelve todos los archivos relacionados con el put |
| tipos | La propiedad devuelve los formatos registrados actualmente como una matriz |
| efectoPermitido | Este atributo informa al navegador de las acciones actualmente disponibles para el usuario |
| dropEffect | El tipo de operación de arrastrar y soltar determina cómo el navegador muestra la forma del mouse |
| elementos | La propiedad devuelve todos los elementos con todos los archivos del formato asociado |
| setData(formato,datos) | Llame a esta función en el evento dragstart para almacenar datos en el objeto dataTransfer |
| obtener datos (formato) | Obtener datos del objeto dataTransfer |
| setArrastrarImagen(elemento,x,y) | Usar un elemento de imagen existente como imagen de arrastre |
| añadirElemento(elemento) | Proporcione un elemento de página como referencia mientras usa este parámetro como una imagen de comentarios de arrastrar y soltar |
| borrar datos() | Indica borrar todos los datos registrados y borra los datos registrados especificados con parámetros (este método no necesita pasar el parámetro 99) |
| Para una API específica, consulte: https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransfer |
Veamos primero un pequeño ejemplo.
Cabe señalar que si desea que un elemento se pueda arrastrar, debe establecer el atributo arrastrable del elemento en "verdadero" para permitir el arrastre.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖放API</title>
<style>
section{
background:red;
border-radius:50%;
width:100px;
height:100px
}
</style>
</head>
<body>
<section draggable="true" id="demo"></section>
<script>
// 获取元素DOM
var demo = document.querySelector('#demo')
// 开始拖动
demo.ondragstart = function (){
console.log('开始拖动')
}
// 正在拖动
demo.ondrag = function (){
console.log('正在拖动(此事件一直触发，除非结束)')
}
// 结束拖动
demo.ondragend = function (){
console.log('结束拖动')
}
</script>
</body>
</html>
Comience a arrastrar, arrastrar y soltar
En este punto, la consola imprime los resultados de la siguiente manera:
manifestación
Al realizar una operación de arrastrar y soltar, el objeto dataTransfer se puede usar para guardar los datos que se están arrastrando. Puede contener uno o más datos, uno o más tipos de datos. En términos simples, los datos arrastrados se pueden transmitir a través de él, de modo que se pueden realizar otras operaciones en los datos cuando finaliza el arrastre.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖放API</title>
<style>
.element{
width:50px;
height:50px;
background:red;
border-radius:50%;
}
section{
width:150px;
height:150px;
background:black;
}
</style>
</head>
<body>
<p>请把小球元素拖到这里：</p>
<section id="container"></section>
<hr>
<div id="e1" class="element" draggable="true">1号</div>
<div id="e2" class="element" draggable="true">2号</div>
<div id="e3" class="element" draggable="true">3号</div>
<script>
// 获取所有 .element DOM节点
var elements = document.querySelectorAll('.element')
// 获取 #container DOM节点
var container = document.getElementById('container')
// 遍历(拖动动作)
for(var i = 0, len = elements.length; i < len; i++){
elements[i].ondragstart = function (e){
// dataTransfer对象中存储数据
e.dataTransfer.setData('id',this.id)
}
}
// 取消默认事件(否则无法放置)
// 其他方法：container.ondragover = function (even){
// even.preventDefault()
// }
container.ondragover = () => {
return false}
// 放置 .element DOM节点(放下)
container.ondrop = function (e){
// 获取 dataTransfer对象数据
var id = e.dataTransfer.getData('id')
// 根据 id 添加到容器
let Flag = document.getElementById(id)
this.appendChild(Flag)
// 控制台查看小球id
console.log(`您当前放置的小球是:【${
id}】`)
}
</script>
</body>
</html>
No arrastrado:
Arrastrado:
Nota: En otros eventos (como ondragover, ondragleave, etc.), es imposible obtener el valor en dataTransfer. Esto se debe al requisito de W3C para proteger los valores en transferencia de datos. Por lo tanto, si necesita obtener datos en estos eventos, solo puede lograrlo a través de una variable global u otros métodos.