基于Vue实现拖拽功能


Posted in Javascript onJuly 29, 2020

本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下

效果图:

基于Vue实现拖拽功能

HTML代码:

<div id="box">       
 位置
 <br>x:{{val.x}} <br>y:{{val.y}}
 <div v-drag="greet" id="drag" :style="style">
 //注意这里要通过指令绑定函数将当前元素的位置数据传出来
 </div>
</div>

JS代码:

Vue.directive('drag',//自定义指令     

 {bind:function (el, binding) {
  let oDiv = el; //当前元素
  let self = this; //上下文
  oDiv.onmousedown = function (e) {
   //鼠标按下,计算当前元素距离可视区的距离
   let disX = e.clientX - oDiv.offsetLeft;
   let disY = e.clientY - oDiv.offsetTop;

   document.onmousemove = function (e) {
   //通过事件委托,计算移动的距离 
   let l = e.clientX - disX;
   let t = e.clientY - disY;
   //移动当前元素 
   oDiv.style.left = l + 'px';
   oDiv.style.top = t + 'px';
    //将此时的位置传出去
   binding.value({x:e.pageX,y:e.pageY})
   };
   document.onmouseup = function (e) {
   
   document.onmousemove = null;
   document.onmouseup = null;
   };
  };
  }
 }
 );
 window.onload = function () {
 let vm = new Vue({
  el: '#box',
  data: {
  val: '123',
  style: {
   width: '100px',
   height: '100px',
   background: 'aqua',
   position: 'absolute',
   right: '30px',
   top: 0
  }
  },
  methods:{
  //接受传来的位置数据,并将数据绑定给data下的val
  greet(val){
   vm.val = val;
  }
  } ,
 });
 }

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

Javascript 相关文章推荐
基于jquery的拖动布局插件
Nov 25 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
自己动手写的javascript前端等待控件
Oct 30 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
利用vue实现模态框组件
Dec 19 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
Vue多选列表组件深入详解
Mar 02 Vue.js
vuex操作state对象的实例代码
Apr 25 #Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 #Javascript
你点的 ES6一些小技巧,请查收
Apr 25 #Javascript
vue 组件使用中的一些细节点
Apr 25 #Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 #Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 #Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 #Javascript
You might like
php桌面中心(三) 修改数据库
2007/03/11 PHP
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
php学习笔记之基础知识
2014/11/08 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
用python实现的线程池实例代码
2018/01/06 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
HTML5计时器小例子
2013/10/15 HTML / CSS
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
什么是servlet链?
2014/07/13 面试题
高中生学习的自我评价
2013/12/14 职场文书
大专学生求职信
2014/07/04 职场文书
2014年学习部工作总结
2014/11/12 职场文书
网络营销计划书
2015/01/17 职场文书
高一语文教学反思
2016/02/16 职场文书