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 相关文章推荐
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
javascript弹出带文字信息的提示框效果
Jul 19 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 Javascript
JS实现可控制的进度条
Mar 25 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.MVC的模板标签系统(二)
2006/09/05 PHP
php 缩略图实现函数代码
2011/06/23 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
PHP简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
jQuery插件简单学习实例教程
2016/07/01 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
实习自我鉴定范文
2013/10/30 职场文书
公司人力资源管理制度
2015/08/05 职场文书
三下乡活动心得体会
2016/01/23 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
如何利用Python实现一个论文降重工具
2021/07/09 Python
HTML中的表单元素介绍
2022/02/28 HTML / CSS
sql注入报错之注入原理实例解析
2022/06/10 MySQL