Vue自定义指令实现拖拽功能
时间:2022-07-24
本文章向大家介绍Vue自定义指令实现拖拽功能,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
效果
HTML:
<div id='app'>
<!-- v-drag 是自定义指令,加上该指令的元素,可以被自由拖拽 -->
<div class="box" v-drag></div>
</div>
CSS:
.box {
width: 150px;
height: 150px;
background: orange;
}
JS:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
// 自定义指令 v-drag
Vue.directive('drag', function(el) {
el.style.position = 'absolute'
el.onmousedown = function(ev) {
console.log(ev)
// 用元素距离视窗的X、Y坐标,减去el元素最近的相对定位父元素的left、top值
var sX = ev.clientX - el.offsetLeft
var sY = ev.clientY - el.offsetTop
document.onmousemove = function(ev) {
var eX = ev.clientX - sX
var eY = ev.clientY - sY
// 不断地更新元素的left、top值
el.style.left = eX + 'px'
el.style.top = eY + 'px'
}
document.onmouseup = function() {
// 清除mousemove事件
document.onmousemove = null
}
}
})
// 创建Vue实例
var app = new Vue({el: '#app'})
</script>
目前10000+人已关注加入我们
- Android之SurfaceView学习一
- 10.5 nload 命令
- 10.4 sar 命令
- javascript 技术填坑之URL
- 用css绕过同源策略跨域窃取数据
- byte与string之间的相互转换
- Linux基础(day 34)
- c++ 文件分块
- 深入学习Apache Spark和TensorFlow
- 10.16/10.17/10.18 iptables nat表应用
- C++实现int与string之间的相互转换
- 10.15 iptables filter表案例
- 利用crypto++库,实现计算string的md5值
- daemon函数结合脚本实现start, stop, restart
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 小白学PyTorch | 4 构建模型三要素与权重初始化
- 小白学PyTorch | 5 torchvision预训练模型与数据集全览
- 细品redis的Scan和Keys命令
- if语句与while语句
- 内网渗透 | 基于IPC的横向移动
- 【DB笔试面试866】队列等待之enq: TX - allocate ITL entry
- 【Vue.js】Vue.js组件库Element中的上传、评分、穿梭框和表单
- 【Vue.js】Vue.js项目构建
- 【Vue.js】Vue.js组件库Element中的表格、标签和进度条
- 用个小技巧,趁你不备,rm -rf你的电脑
- 什么是Python 中的EAFP 哲学
- 设计模式--工厂模式
- 设计模式--命令模式
- 安装FastDFS+Nginx
- Redis 中的 5 大数据类型及其常用命令手册