[vue] Utilice vue para lograr el efecto de arrastrar/eliminar

2024-07-12

Recibí un pequeño proyecto de subcontratación esta semana y solicité usar vue para lograr el efecto de arrastrar y soltar como se muestra a continuación.

Insertar descripción de la imagen aquí

principio

@mousedownSupervise los clics del mouse y enciéndalo después de presionarmousemove + mouseupoyente y basado enclientY + offsetTop Calcule la nueva altura superior del elemento y asígnela para implementar el siguiente elemento.El código fuente específico es el siguiente

<div title="demo" class="icon" @mousedown="demo">
	<img src="../assets/logo.png" alt="">
	<div class="icon_title" :style="{display: state.isShow ? 'block' : 'none'}">
		拖拽下拉新增书签 <br /> 拖回顶部删除书签
	</div>
</div>
1
2
3
4
5
6

demo(e) {
	//去除默认样式 - 避免拖动元素出现禁止图标
	e.preventDefault && e.preventDefault();
	//获取目标元素
	let odiv = e.target;
	//算出鼠标相对元素的位置
	let disY = e.clientY - odiv.offsetTop;
	let item = {
		top: 0,
		id: 1,
		url: '/src/assets/logo.png'
	}
	//监听鼠标移动事件
	document.onmousemove = (e) => { 
		//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
		let top = e.clientY - disY;
		//重新赋值
		item.top = top;
	};
	//监听鼠标松开
	document.onmouseup = (e) => {
		document.onmousemove = null;
		document.onmouseup = null;
		//赋值
		this.itemLeft.push(item)

	};
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Enlaces de referencia:Otro enlace de referencia para aprender a arrastrar y soltar en Vue: cálculos específicos de parámetros como clientY

dificultad

Cuando se presiona y mueve el mouse, se ingresará el evento de arrastre del elemento y aparecerá el ícono de inhibición del mouse.esto interrumpirámousemove efecto de seguimiento. Después de buscar durante mucho tiempo, todos dijeron que bastaría con escribir el atributo dragglable="true" en HTML, pero no funcionó. Finalmente, se implementó en una línea de código en js.

//去除默认样式 - 避免拖动元素出现禁止图标
e.preventDefault && e.preventDefault();
1
2

El elemento debe seguir al mouse cuando se presiona, lo que requiere calcular la posición del mouse en relación con el elemento cuando se presiona. Esta posición relativa también debe calcularse al reasignar cuando se mueve. Esto no es algo fácil de entender y me llevó mucho tiempo aprenderlo mirando el enlace de referencia de arriba.

Este artículo solo implementa la función de arrastrar y soltar, regístrela y espero poder alcanzar la perfección cuando enfrente necesidades similares en el futuro.

Compartir tecnología