技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

今週小規模なアウトソーシング プロジェクトを受け取り、以下に示すように vue を使用してドラッグ アンド ドロップ効果を実現するように依頼しました。

原理

@mousedownマウスのクリックを監視し、押した後にオンになりますmousemove + mouseupリスナーとそれに基づくclientY + offsetTop要素の新しい上部の高さを計算し、それを要素追従の実装に割り当てます。具体的なソースコードは以下の通り

<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

参考リンク:Vue のドラッグ アンド ドロップを学習するための別の参考リンク: clientY などのパラメーターの具体的な計算

困難

• マウスを押して移動すると、要素ドラッグイベントが発生し、マウス禁止アイコンが表示されます。これは中断されますmousemoveモニタリング効果。いろいろ探した結果、HTMLにdraggable="true"属性を書けば良いと皆言っていましたが、うまくいきませんでした。最終的には、js の 1 行のコードで実装されました。

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

• 要素は押されたときにマウスに追従する必要があるため、押されたときの要素に対するマウスの位置を計算する必要があり、移動時に再割り当てするときにもこの相対位置を計算する必要があります。これは簡単に理解できるものではなく、上記の参考リンクを見て理解するのに長い時間がかかりました。

この記事ではドラッグ アンド ドロップ機能を実装し、それを記録するだけなので、将来同様のニーズに直面したときに完璧を達成できることを期待しています。