Uso de API de arrastre HTML5

dragstart: El cuerpo del evento es el elemento arrastrado y soltado, que se activa cuando el elemento arrastrado y soltado comienza a arrastrarse.

darg: El cuerpo del evento es el elemento arrastrado y soltado, que se activa cuando el elemento arrastrado y soltado se arrastra y suelta.

dragenter: El cuerpo del evento es el elemento de destino, que se activa cuando el elemento arrastrado ingresa a un elemento.

dragover: El cuerpo del evento es el elemento de destino, que se activa cuando se arrastra y mueve dentro de un elemento.

dragleave: el cuerpo del evento es el elemento de destino y se activa cuando el elemento arrastrado se mueve fuera del elemento de destino.

drop: El cuerpo del evento es el elemento de destino, que se activa cuando el elemento de destino acepta por completo el elemento arrastrado y soltado.

dragend: El cuerpo del evento es el elemento que se está arrastrando y soltando, que se activa cuando finaliza toda la operación de arrastrar y soltar.

Luego miramos el código de uso específico

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>drag Api 拖拽用法示例</title>
		<style type="text/css">
			#dropBox {
				position: absolute;
				width: 100px;
				height: 100px;
				background-color: green;
				border: 1px solid antiquewhite;
			}

			#wrarry {
				position: absolute;
				top: 0;
				right: 0;
				width: 300px;
				height: 300px;
				background-color: red;
				border: 1px solid antiquewhite;
			}
		</style>
	</head>
	<body>
		<div id="dropBox" draggable="true">

		</div>

		<div id="wrarry">

		</div>
		<script type="text/javascript">
			dropBox.ondragstart = (event) => {
				console.log('dropBox开始拖动');
				event.dataTransfer.setData("Text", event.target.id);
			}
			dropBox.ondragend = (event) => {
				console.log('dropBox结束拖动');
			}
			wrarry.ondragenter = (event) => {
				event.preventDefault();
				console.log('进入wrarry触发');
			}
			wrarry.ondragover = (event) => {
				event.preventDefault();
				console.log('进入wrarry内部触发');
			}
			wrarry.ondragleave = (event) => {
				event.preventDefault();
				console.log('离开wrarry触发');
			}
			wrarry.ondrop = (event) => {
				event.preventDefault()
				var data = event.dataTransfer.getData("Text");
				event.target.appendChild(document.getElementById(data));
			}
			document.documentElement.ondragover = (event)=>{
				event.preventDefault()
			}
			document.documentElement.ondrop = (event) => {
				event.preventDefault()
				var data = event.dataTransfer.getData("Text");
				event.target.appendChild(document.getElementById(data));
			}
		</script>
	</body>
</html>

Transferencia de datos (método setData())

Primero echemos un vistazo a la explicación oficial.
El objeto DataTransfer se usa especialmente para almacenar los datos que se llevarán durante el arrastrar y soltar. Se puede configurar como la propiedad DataTransfer del objeto de evento de arrastrar y soltar. —Almacene los datos arrastrados en él.
setData tiene dos parámetros:
1. El primer parámetro es una cadena del tipo de datos que transporta los datos, y solo se puede completar con algo como "text/plain" o "textml" que indica el tipo MIME Texto
2. El segundo parámetro es el
elemento de destino de datos que se transportará mediante el método getData()
(1). Después de que el elemento de destino reciba el elemento arrastrado y soltado, ejecute el método getData() para obtener los datos del DataTransfer
(2).getData( ) El parámetro del método es el tipo de datos especificado en el método setData()

Ejemplo:

<span
      v-else
      :title="item.cameraName"
      class="tree-span"
      draggable="true"
      @dragstart="drag($event, item)"
></span>

//组件一：（传递数据的组件）
drag(e, item) {
      e.dataTransfer.setData("deviceId", item.id);
      e.dataTransfer.setData("playOutputUrl", item.playOutputUrl);
    },
//组件二 （接收数据的组件）
 drop(e, item) {
      let deviceId = e.dataTransfer.getData("deviceId");
      let playOutputUrl=e.dataTransfer.getData("playOutputUrl");
}

Si hay muchos datos para pasar, puede escribir algunos métodos más en el componente 1
y obtener el nombre correspondiente en el componente 2.

Uso de API de arrastre HTML5

Transferencia de datos (método setData())

Supongo que te gusta