vue模块拖拽实现示例代码

佚名 5年前 (2019-05-09) 随笔 627人围观抢沙发百度已收录

正巧在之前面试中遇到问实现拖拽效果

当时面试的时候简单回答了实现的方式与逻辑。

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

现在闲来无事，把这个东西实现了一下。

原理很简单，写的很方便。

数据驱动，建立一个数组，数组初始长度为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{ width: 250px; height: 50px; top: 50px; left: 10px; position: absolute; background: red; color: yellow; } } </ style >