Обмен технологиями

한어Русский язык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 эффект мониторинга. После долгих поисков все сказали, что достаточно просто написать атрибут dragglable="true" в HTML, но это не сработало. Наконец, это было реализовано в одной строке кода на js.

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

• Элемент должен следовать за мышью при нажатии, что требует расчета положения мыши относительно элемента при нажатии. Это относительное положение также необходимо вычислять при переназначении при перемещении. Это непросто понять, и мне потребовалось много времени, чтобы изучить это, просматривая ссылку выше.

В этой статье реализована только функция перетаскивания, ее запись и надежда на то, что мы сможем достичь совершенства при возникновении подобных потребностей в будущем.