基于Vue实现拖拽效果
参考地址:基于Vue实现拖拽效果
参考链接中讲的比较详细,我只使用了其中自定义指令的方法。整体代码如下:
<template>
<!-- 卡片 -->
<div class="card" v-drag id="card"> </div>
</template> <script>
export default {
data() {
return {
}
},
directives: {
drag: {
// 指令的定义
bind: function(el) {
let oDiv = el; // 获取当前元素
oDiv.onmousedown = (e) => {
// 算出鼠标相对元素的位置
let disX = e.clientX - oDiv.offsetLeft;
let disY = e.clientY - oDiv.offsetTop; document.onmousemove = (e) => {
// 用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY; oDiv.style.left = left + 'px';
oDiv.style.top = top + 'px';
}; document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
}
}
}
}
}
}
</script> <style lang="scss">
.card {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 870px;
height: 510px;
background-color: #3ab5a0;
}
</style>
使用方法:在需拖拽功能的元素上添加v-drag启用:
补充:阻止拖拽
上述方法利用自定义指令实现了弹窗的拖拽,补充部分是阻止拖拽,例如:弹窗中有input框,如果想要选中input中的内容就需要阻止弹窗的拖拽
参考地址:vue实现弹窗拖拽
export default {
directives: {
/*自定义拖拽*/
drag: {
inserted: function(el, binding, vnode) {
var odiv = el.parentNode;
odiv.onmousedown = function(eve) {
eve = eve || window.event;
var clientX = eve.clientX;
var clientY = eve.clientY;
var odivX = odiv.offsetLeft;
var odivY = odiv.offsetTop;
var odivLeft = clientX - odivX;
var odivTop = clientY - odivY;
var clientWidth = document.documentElement.clientWidth;
var oWidth = odiv.clientWidth;
var odivRight = clientWidth - oWidth;
var clientHeight = document.documentElement.clientHeight;
var oHeight = odiv.clientHeight;
var odivBottom = clientHeight - oHeight;
document.onmousemove = function(e) {
e.preventDefault();
var left = e.clientX - odivLeft;
if (left < 0) {
left = 0
}
if (left > odivRight) {
left = odivRight
}
var Top = e.clientY - odivTop;
if (Top < 0) {
Top = 0
}
if (Top > odivBottom) {
Top = odivBottom
}
odiv.style.left = left + "px";
odiv.style.top = Top + "px";
}
document.onmouseup = function() {
document.onmouseup = "";
document.onmousemove = "";
}
}
}
},
/*阻止拖拽*/
stopdrag: {
inserted: function(el, binding, vnode) {
let element = el;
element.onmousedown = function(e) {
e.stopPropagation()
}
}
}
}
}
使用方法:在不需拖拽的元素上添加v-stopdrag阻止:
基于Vue实现拖拽效果的更多相关文章
- vue模块拖拽效果
正巧在之前面试中遇到问实现拖拽效果 当时面试的时候简单回答了实现的方式与逻辑. 现在闲来无事,把这个东西实现了一下. 原理很简单,写的很方便. 数据驱动,建立一个数组,数组初始长度为1 拖动触发时,添 ...
- Vue.Draggable拖拽效果
1.下载包:npm install vuedraggable 配置:package.json "dependencies": { "vuedraggable": ...
- Vue.Draggable实现拖拽效果(采坑小记)
之前有写过Vue.Draggable实现拖拽效果(快速使用)(http://www.cnblogs.com/songdongdong/p/6928945.html)最近项目中要用到这个拖拽的效果,当产 ...
- Swift2.0下UICollectionViews拖拽效果的实现
文/过客又见过客(简书作者)原文链接:http://www.jianshu.com/p/569c65b12c8b著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 原文UICollecti ...
- element-UI ,Table组件实现拖拽效果
拖拽效果,先放效果图,步骤放在后面~~ 一.引入三方插件 1.引入sortable.js的包: npm install sortable.js --save 2.或者npm i -S vuedragg ...
- 微信小程序 -- 基于 movable-view 实现拖拽排序
微信小程序 -- 基于 movable-view 实现拖拽排序 项目基于colorui样式组件 ColorUI组件库 (color-ui.com) 1.实现效果 2. 设计思路 movable-vie ...
- Vue 可拖拽组件 Vue Smooth DnD 详解和应用演示
本文发布自 https://www.cnblogs.com/wenruo/p/15061907.html 转载请注明出处. 简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好用的 Vu ...
- 超强的纯 CSS 鼠标点击拖拽效果
背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...
- jQuery的DOM操作实例(2)——拖拽效果&&拓展插件
一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件
随机推荐
- centos7 搭建FTP
通过yum安装vsftpd yum install -y vsftpd 修改vsftpd的配置文件 vim /etc/vsftpd/vsftpd.conf 修改配置文件如下: 1.不允许匿名访问 an ...
- Storm和Hadoop 区别
Storm - 大数据Big Data实时处理架构 什么是Storm? Storm是:• 快速且可扩展伸缩• 容错• 确保消息能够被处理• 易于设置和操作• 开源的分布式实时计算系统- 最初由Na ...
- C++ ++pos vs pos++
list<char>::iterator pos; 一般使用前置式递增(preincrement),因为它比后置式递增(postincrement)效率高,因为后置式递增内部需要一个临时对 ...
- leetcode刷题-559. Maximum Depth of N-ary Tree
题目: https://leetcode.com/problems/maximum-depth-of-n-ary-tree/description/ n-ary-tree的数据结果表示 // Defi ...
- Delphi 中自定义异常及异常处理的一般方法
delphi中异常定义如下: TCustomException = class(Exception) private public constructor ...
- java工具类学习,系统中用户密码加密总结
现在项目,用户注册登录部分很少有涉及到了,原因:现在热门开发框架都已经在底层帮我们做了一套用户注册,密码加密,登录认证,权限控制,缓存数据等基本功能. 这有利于项目的快速完成,只需要搬砖码畜们专注于业 ...
- css 边框和圆角
CSS3圆角 border-radius属性 一个最多指定四个border -*- radius复合属性,这个属性允许你为元素添加圆角边框 语法 border-radius:1-4 length|% ...
- golang web框架设计4:日志设计
beego的日志设计思路来自于seelog,根据不同的level来记录日志,beego设计的日志是一个轻量级的,采用系统log.Logger接口,默认输出到os.Stdout,用户可以实现这个接口然后 ...
- TensorFlow.环境_avx2
1.缘由: 按照之前的步骤,在Win10的笔记本上就是不行: 1.1.jupyter notebook的相关界面,如下图所示: ZC:感觉 应该还是 tensorflow的问题 1.2.然后 各种测试 ...
- 第3课.进化后的const
1.c语言中 const修饰的变量是只读的,本质上还是变量 const修饰的局部变量在栈上分配空间(因为在栈上分配空间,所以我们可以通过改变这个空间的值.间接去改变这个变量.) const修饰的全局变 ...