基于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的3d效果实现代码
Mar 23 Javascript
用jquery写的一个万年历(自写)
Jan 20 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
Javascript中arguments用法实例分析
Jun 13 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
Vue2 轮播图slide组件实例代码
May 31 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 Javascript
vue el-table实现递归嵌套的示例代码
Aug 14 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
global.php
2006/12/09 PHP
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
PHP制作用户注册系统
2015/10/23 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
php集成动态口令认证
2016/07/21 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
JavaScript方法和技巧大全
2006/12/27 Javascript
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
Javascript 面向对象特性
2009/12/28 Javascript
jquery阻止后续事件只执行第一个事件
2014/07/24 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
python实现的各种排序算法代码
2013/03/04 Python
实例讲解python中的序列化知识点
2018/10/08 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
python实现根据文件格式分类
2019/10/31 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
基于python实现操作redis及消息队列
2020/08/27 Python
浅析python中的del用法
2020/09/02 Python
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
财务信息服务专业自荐书范文
2014/02/08 职场文书
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python