基于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 相关文章推荐
JavaScript 不只是脚本
May 30 Javascript
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
jQuery技巧总结
Jan 01 Javascript
手机号码,密码正则验证
Sep 04 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
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
Zend的MVC机制使用分析(二)
2013/05/02 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
php分页代码学习示例分享
2014/02/20 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
jquery JSON的解析方式
2009/07/25 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
2017/01/21 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
实例讲解Python中函数的调用与定义
2016/03/14 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
生产主管岗位职责
2013/11/10 职场文书
党员学习十八大感想
2014/01/17 职场文书
爱情保证书大全
2014/04/29 职场文书
护士医德医风自我评价
2014/09/15 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
如何写好活动总结
2019/06/21 职场文书