Vue.directive('dialogDrag', {
inserted:function(el) {
const dragDom = el.querySelector('.jsPropupLayerHead');
dragDom.style.cursor = 'move';
dragDom.onmousedown = (e) => {
event.stopPropagation();
// 鼠标按下,计算当前元素距离可视区的距离
const disX = e.clientX - el.offsetLeft;
const disY = e.clientY - el.offsetTop;
console.log('disX='+disX)
console.log('disY='+disY)
document.onmousemove = (e)=>{
//用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;
//移动当前元素
el.style.left = left + 'px';
el.style.top = top + 'px';
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
}
}
})

vue v-dialogDrag: 弹窗拖拽的更多相关文章

  1. Vue. 之 Element dialog 拖拽

    Vue. 之 Element dialog 拖拽 默认情况下,在使用Element的Dialog模块时,弹出框是不能移动的,且 一旦点击遮罩层区域,弹框就会消失. 解决方案: 1 在 utils 中新 ...

  2. 原生弹窗拖拽代码demo+简单的抽奖

    拖拽效果 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  3. vue简单的自由拖拽

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. vue实现element-ui对话框可拖拽功能

    element-ui对话框可拖拽及边界处理 应业务需求,需要实现对话框可拖拽问题,应element-ui没有提供官方支持,于是便参考大神的文章,得出了适合业务需要的解决方案.很多大神给出的代码是没有解 ...

  5. 实现在vue中element-ui的el-dialog弹框拖拽

    参考:实现在vue中element-ui的el-dialog弹框拖拽 1.在 utils 中新建 directives.js 文件 import Vue from 'vue' // v-dialogD ...

  6. 基于Vue实现拖拽效果

    参考地址:基于Vue实现拖拽效果 参考链接中讲的比较详细,我只使用了其中自定义指令的方法.整体代码如下: <template> <!-- 卡片 --> <div clas ...

  7. Vue 表单拖拽排序

    Vue table表单拖拽 业务需求: 因为数据展示使用的是 elementUI 的 Table进行数据展示的,现在的需求是通过拖拽表单进行表单排序.同时,动态修改表单中的数据排列顺序.查阅了好多资料 ...

  8. Vue实现拖拽穿梭框功能四种方式

    一.使用原生js实现拖拽 点击打开视频讲解更加详细 <html lang="en"> <head> <meta charset="UTF-8 ...

  9. 可拖拽dialog

    指令的封装转自https://blog.csdn.net/sinat_21902709/article/details/86545444 可拖拽dialog应用于很多弹出框,所以需要作用于全局 在插件 ...

随机推荐

  1. rpm包的安装方法

    每次都记不住,这次必须整理一下!cd到你存放rpm文件包的目录rpm -ivh linuxqq-v1.0.2-beta1.i386.rpm安装时可能会遇到缺少包的错误.rpm -ivh --repla ...

  2. Android - CollapsingToolbarLayout 完全解析

    CollapsingToolbarLayout 是 google 在其推出的design libiary 中给出的一个新型控件.其可以实现的效果类似于: toolbar是透明的,有一个背景图片以及大标 ...

  3. {ubuntu}不能挂载windows

    sudo apt-get install ntfs-3g sudo ntfsfix /dev/sda?

  4. IOS生成UUID

    /** * 生成GUID */ + (NSString *)generateUuidString{ // create a new UUID which you own CFUUIDRef uuid ...

  5. COGS 1427. zwei

    ★☆   输入文件:zwei.in   输出文件:zwei.out   简单对比时间限制:1 s   内存限制:256 MB ‘‘ [样例输入] 5 5 1 2 3 4 5 1 1 3 1 3 5 0 ...

  6. Python 学习日志9月19日

    9月19日 周二 今天是普通的一天,昨天也是普通的一天,刚才我差点忘记写日志,突然想起来有个事情没做,回来写. 今天早晨学习<Head First HTML and CSS>第十一章节“布 ...

  7. Mybatis Cache 缓存策略

    Mybatis Cache 缓存策略 正如大多数持久层框架一样,MyBatis 同样提供了一级缓存和二级缓存的支持 一级缓存: 基于PerpetualCache 的 HashMap本地缓存,其存储作用 ...

  8. shell补充知识点

    一.cut(截取) 1.按字节截取(-b) 例:/etc/passwd文件截取 head -5 passwd | cut -b 1-4 ----->截取1-4的字节 head -5 passwd ...

  9. 【图文并茂】DEV配置NTL库

    一开始根据陈老师的博客:再说如何在DEV C++中搭建NTL库 后来发现自己虽然跟着一步一步来做,还是做错了很多回. 究竟怎么一回事呢?后来我发现一个致命的错误很容易忽视,所以我就重新写一篇博客. 来 ...

  10. fclose - 关闭流

    SYNOPSIS 总览 #include <stdio.h> int fclose(FILE *stream); DESCRIPTION 描述 函数 fclose 将名为 stream 的 ...