正巧在之前面试中遇到问实现拖拽效果
当时面试的时候简单回答了实现的方式与逻辑。
现在闲来无事，把这个东西实现了一下。
原理很简单，写的很方便。
数据驱动，建立一个数组，数组初始长度为1
拖动触发时，添加一个对象到数组中，拖动的是下标为0的对象，新建的还在原来位置放着，等待下次拖动。
话不多说，上代码
|
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
<template> <div class="view"> <div class="x" @mousedown="move($event,index)" v-for="(x,index) in i"> <span v-if="index+1 !== i.length">{{index+1}}</span> <input v-model="x.input"> </div> {{i}} </div></template><script> export default { name: "index", data(){ return{ positionX:0, positionY:0, i:[ {input:''} ] } }, methods:{ move(e,x){ let odiv = e.target; //获取目标元素 //算出鼠标相对元素的位置 let disX = e.clientX - odiv.offsetLeft; let disY = e.clientY - odiv.offsetTop; let flag = true; document.onmousemove = (e)=>{ //鼠标按下并移动的事件 if(flag && x === this.i.length-1){ flag = false; this.i.push({input:''}) } //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置 let left = e.clientX - disX; let top = e.clientY - disY; //绑定元素位置到positionX和positionY上面 this.positionX = top; this.positionY = left; //移动当前元素 odiv.style.left = left + 'px'; odiv.style.top = top + 'px'; }; document.onmouseup = (e) => { document.onmousemove = null; document.onmouseup = null; }; } } }</script><style scoped lang="less"> .view{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #f8f8f8; .x{ 250px; height: 50px; top: 50px; left: 10px; position: absolute; background: red; color: yellow; } }</style> |
一个简单的demo，后续用的话可以再丰富，比如以拖动长度来触发事件。
input可以换成子组件。这里提供分享一个底层的实现方式