vue模块拖拽实现示例代码


Posted in Javascript onMarch 09, 2019

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

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
js 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
javascript 函数调用规则
Aug 26 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 Javascript
Vue中的验证登录状态的实现方法
Mar 09 #Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 #Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 #Javascript
Koa日志中间件封装开发详解
Mar 09 #Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 #Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 #Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 #Javascript
You might like
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
javascript中length属性的探索
2011/07/31 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
学习python的几条建议分享
2013/02/10 Python
python发腾讯微博代码分享
2014/01/10 Python
python flask实现分页效果
2017/06/27 Python
Django自定义用户认证示例详解
2018/03/14 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
python如何导入依赖包
2020/07/13 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
岗位职责定义及内容
2013/11/08 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
《从现在开始》教学反思
2014/04/15 职场文书
技术负责人任命书
2014/06/05 职场文书
高中生旷课检讨书
2014/10/08 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书