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. poj3046

    dp,可以再优化. #include <iostream> #include <cstdio> #include <cstring> using namespace ...

  2. Android项目中包名的修改

    通常修改包名时会造成R文件错误,并且有时带有原因不明的Manifest文件中多处文本混乱. 所以,将目前认为最为简洁方便的修改包名流程记录如下: 假设我们目前的包名为com.pepper.util,我 ...

  3. cacti添加被监控机全过程

    在被监控端上的操作: 1.在被监控机器上root目录下建立文件 test.sh chmod 777 test.sh cat test #!/bin/bash echo $RANDOM 2.在snmpd ...

  4. DRP项目

    DRP(distribution resource planning)分销资源计划是管理企业的分销网络的系统,目的是使企业具有对订单和供货具有快速反应和持续补充库存的能力.解决了随着企业销售规模的逐渐 ...

  5. 洛谷 P2910 [USACO08OPEN]寻宝之路Clear And Present Danger

    题目描述 Farmer John is on a boat seeking fabled treasure on one of the N (1 <= N <= 100) islands ...

  6. 如何用JavaScript判断前端应用运行环境(移动平台还是桌面环境)

    我们部署在某些云平台或者Web服务器上的前端应用,既可以用PC端浏览器访问,也可以用手机上的浏览器访问. 在前端应用里,有时候我们需要根据运行环境的不同做出对应处理.比如下面这段逻辑,如果判断出应用当 ...

  7. JS中的delete操作符

    首先,delete删除成功返回true,失败返回false. js代码: function wxCount ($element) { this.init($element); } wxCount.pr ...

  8. Node.js连接mysql报加密方式错误解决方案

    本人在学习全栈开发过程中做一个Node的web项目在连接本地MySQL8.0版本的数据库时,发现Navicat连接不上,它报了一个数据库的加密方式导致连接不上的错误,错误如下: MySQL8.0版本的 ...

  9. 快学UiAutomator新建第一个测试工程

    1.打开Eclipse 2.新建一个java项目,包 3.增加build path,加载需要的库文件jar包 4.新建测试类,继承UIAutomatorTestCase 5.编写测试用例,方法名必须t ...

  10. WPF使用附加属性绑定,解决data grid列绑定不上的问题

    背景 需要对datagrid的列header添加自定义属性,然后绑定,并根据不同的列header绑定不同的值,传统的加扩展类太麻烦,而附加属性的特点更适用于这种场景. 1.xaml 代码 <Da ...