[vue] Utilisez vue pour obtenir un effet glisser/supprimer

2024-07-12

J'ai reçu un petit projet d'externalisation cette semaine et j'ai demandé à utiliser vue pour obtenir l'effet glisser-déposer comme indiqué ci-dessous.

Insérer la description de l'image ici

principe

@mousedownSurveillez les clics de la souris et allumez-le après avoir appuyé surmousemove + mouseupauditeur et basé surclientY + offsetTop Calculez la nouvelle hauteur supérieure de l'élément et attribuez-la pour implémenter l'élément suivant.Le code source spécifique est le suivant

<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

Liens de référence :Autre lien de référence pour l'apprentissage du glisser-déposer de Vue : calculs spécifiques de paramètres tels que clientY

difficulté

Lorsque la souris est enfoncée et déplacée, l'événement de glissement d'élément sera entré et l'icône d'interdiction de la souris apparaîtra.cela va interrompremousemove effet de surveillance. Après une longue recherche, ils ont tous dit qu'il suffirait d'écrire l'attribut dragglable="true" en HTML, mais cela n'a pas fonctionné. Enfin, il a été implémenté dans une seule ligne de code en js.

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

L'élément doit suivre la souris lorsqu'il est enfoncé, ce qui nécessite de calculer la position de la souris par rapport à l'élément lorsqu'il est enfoncé. Cette position relative doit également être calculée lors de la réaffectation lors du déplacement. Ce n'est pas quelque chose de facile à comprendre, et cela m'a pris du temps, je l'ai appris en regardant le lien de référence ci-dessus.

Cet article implémente uniquement la fonction glisser-déposer, l'enregistre et espère pouvoir atteindre la perfection face à des besoins similaires à l'avenir.

Partage de technologie