vue模块拖拽实现
栏目: JavaScript · 发布时间: 5年前
内容简介:正巧在之前面试中遇到问实现拖拽效果当时面试的时候简单回答了实现的方式与逻辑。现在闲来无事,把这个东西实现了一下。
正巧在之前面试中遇到问实现拖拽效果
当时面试的时候简单回答了实现的方式与逻辑。
现在闲来无事,把这个东西实现了一下。
原理很简单,写的很方便。
数据驱动,建立一个数组,数组初始长度为1
拖动触发时,添加一个对象到数组中,拖动的是下标为0的对象,新建的还在原来位置放着,等待下次拖动。
话不多说,上代码
<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>
一个简单的demo,后续用的话可以再丰富,比如以拖动长度来触发事件。
input可以换成子组件。这里提供分享一个底层的实现方式
input可以换成子组件。这里提供分享一个底层的实现方式
以上所述就是小编给大家介绍的《vue模块拖拽实现》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 前端模块化架构设计与实现(二|模块接口设计)
- Go实现Python模块
- 【Node】详解模块的实现过程
- NodeJS 模块化的简易实现(commonJS)
- 从module的简单实现到模块化
- redis网络通信模块设计与实现分析
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。