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

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

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

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

数据驱动,建立一个数组,数组初始长度为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可以换成子组件。这里提供分享一个底层的实现方式

vue模块拖拽效果的更多相关文章

  1. 基于Vue实现拖拽效果

    参考地址:基于Vue实现拖拽效果 参考链接中讲的比较详细,我只使用了其中自定义指令的方法.整体代码如下: <template> <!-- 卡片 --> <div clas ...

  2. Vue.Draggable拖拽效果

    1.下载包:npm install vuedraggable 配置:package.json "dependencies": { "vuedraggable": ...

  3. Vue.Draggable实现拖拽效果(采坑小记)

    之前有写过Vue.Draggable实现拖拽效果(快速使用)(http://www.cnblogs.com/songdongdong/p/6928945.html)最近项目中要用到这个拖拽的效果,当产 ...

  4. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  5. element-UI ,Table组件实现拖拽效果

    拖拽效果,先放效果图,步骤放在后面~~ 一.引入三方插件 1.引入sortable.js的包: npm install sortable.js --save 2.或者npm i -S vuedragg ...

  6. Vue 可拖拽组件 Vue Smooth DnD 详解和应用演示

    本文发布自 https://www.cnblogs.com/wenruo/p/15061907.html 转载请注明出处. 简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好用的 Vu ...

  7. jQuery的DOM操作实例(2)——拖拽效果&&拓展插件

    一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件

  8. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. WinForm支持拖拽效果

    有一个MSDN客户提问在WinForm中如何实现拖拽效果——比如在WinForm中有一个Button,我要实现的效果是拖拽这个Button到目标位置后生成一个该控件的副本. 其实这个操作主要分成三步走 ...

随机推荐

  1. jquery-uploadify传参方法

    jquery-uploadify传参方法$(document).ready(function () { $("#uploadify").uploadify({ 'uploader' ...

  2. Oracle11gr2_ADG管理之跳归档恢复dg实战

    模拟故障 关闭备库 SQL> shutdown immediate; Database closed. Database dismounted. ORACLE instance shut dow ...

  3. 第一篇&nbsp;UCOS介绍

    第一篇 UCOS介绍 这个大家都知道.呵呵.考虑到咱们学习的完整性还是在这里唠叨一下.让大家再熟悉一下.高手们忍耐一下吧! uC/OS II(Micro Control Operation Syste ...

  4. MAVEN学习总结1

    一.安装Maven插件 下载下来的maven插件如下图所示:,插件存放的路径是:E:/MavenProject/Maven2EclipsePlugin

  5. SSM框架整合(Spring+SrpingMVC+Mybatis) 简单案例

    简介: SSM框架是Spring,SpringMVC 和Mybatis框架的整合,是标准的MVC模式,将整个系统划分为表现层,controller层,service层,dao层四层. Spring实现 ...

  6. 【原创】13. MYSQL++之SSQLS(基本用法篇)

    1. 综述 终于来到了SSQLS( Specialized SQL Structure),照我看来这是一个很类似于Hibernate的功能.也就是说,通过SSQLS可以将一张表完全对应到一个C++结构 ...

  7. 【FZU2278】YYS

    题意 这里有n种卡片,如果你想得到一张新的卡片,你需要花费W枚硬币来抽一张卡片.每次只能抽一张.所有的卡片出现的概率都是1/n,你每天可以得到1枚硬币.初始时候没有硬币也没有卡片.每W天,你就会抽一张 ...

  8. IP定位,天气接口

    首先获取IP ////获得本地真实IP function get_onlineip() { $ip_json = @file_get_contents("http://ip.taobao.c ...

  9. php扩展开发1--添加函数

    目标:便携php扩展 要求实现 输出hello word 首先用的是php7.0.3   centos7.1或者centos6.+ 1.1 RPM安装PHP rpm -Uvh https://mirr ...

  10. HDU 3365 New Ground (计算几何)

    题意:给定点A[0~n-1]和B[0],B[1],A[0].A[1]映射到B[0].B[1],求出其余点的映射B[2]~B[n-1]. 析:运用复数类,关键是用模板复数类,一直编译不过,我明明能编译过 ...