在项目开发过程中,有些情况dialog弹窗,直接使用div模拟弹窗效果,并需要支持div可拖拽。

div模拟弹窗效果:

(1)在用于存放指令的文件夹内,新建js文件,命名为:drag.js。具体代码如下所示:

 import Vue from 'vue';
//使用Vue.directive()定义一个全局指令
//1.参数一:指令的名称,定义时指令前面不需要写v-
//2.参数二:是一个对象,该对象中有相关的操作函数
//3.在调用的时候必须写v-
const drag = Vue.directive('drag',{
//1.指令绑定到元素上回立刻执行bind函数,只执行一次
//2.每个函数中第一个参数永远是el,表示绑定指令的元素,el参数是原生js对象
//3.通过el.focus()是无法获取焦点的,因为只有插入DOM后才生效
bind:function(el){},
//inserted表示一个元素,插入到DOM中会执行inserted函数,只触发一次
inserted:function(el){
el.onmousedown = function (e) {
var disx = e.pageX - el.offsetLeft;
var disy = e.pageY - el.offsetTop;
document.onmousemove = function (e) {
el.style.left = e.pageX - disx + 'px';
el.style.top = e.pageY - disy + 'px';
}
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null;
}
}
},
//当VNode更新的时候会执行updated,可以触发多次
updated:function(el) {}
})
export default drag;

(2)在main.js中引入该指令:

// div拖拽效果
import drag from './directive/drag';

(3)在需要拓展的div中,加入指令:v-drag

使div弹窗可拖拽指令的更多相关文章

  1. 使dialog可拖拽指令

    在项目开发过程中,需要支持dialog弹窗可拖拽,则需要对dialog添加指令.具体操作说明如下: (1)在用于存放指令的文件夹内,新建拖拽指令文件夹,例如命名为:el-dragDialog,如下所示 ...

  2. Angular 自定义拖拽指令

    指令 组件是一种带模版的指令.指令是超级. 结构型指令(改变布局)和属性型指令(改变外观和行为). Renderer2和ElementRef Angular不提倡直接操作DOM 对于DOM的操作应该通 ...

  3. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jQuery 学习笔记3 点击弹出一个div并允许拖拽移动

    这里我看了下http://qings.blog.51cto.com/4857138/998878/ 的文章,感谢他的分享. 首先我们有一个a标签和一个div,div默认是不显示的,当用户点击时改为显示 ...

  5. 用JavaScript实现div的鼠标拖拽效果

    实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的. HTML <div class=&qu ...

  6. 【j2ee】div浮动层拖拽

    背景:近期项目中需要实现弹出浮层增加数据,并且浮动层可以拖拽 解决步骤:1.浮动层实现  2.拖拽实现 多方查资料,基本实现功能,现做demo,便于以后使用 先上图片大体展示实现效果: 再上代码,展示 ...

  7. div与div之间的拖拽

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. div/dom元素拖拽缩放插件,纯js实现拖拽缩放,不依赖jQuery~

    产品需求,需要用到对div(dom)进行拖拽缩放操作,看到有好多插件,要么依赖jQuery,要么文件太大. 封装了一个插件,不压缩状态下5KB. html <!DOCTYPE html> ...

  9. DIV 实现可拖拽 功能(留档)

    //可拖拽 功能 $.fn.extend({    //用法:$(element).jqDrag();    //element需要具备定位属性,需要手动调整层叠样式,这里只是修改鼠标拖动效果    ...

随机推荐

  1. It's strange. I felt less lonely when I didnt know you.

    feasible:adj. 可行的 bypass: v. 绕开,避开 eclipse: n. 月食 raw: adj. 生的 foresee:v. 预见 premier:n. 总理 ,adj: 首要的 ...

  2. openWRT利用mac地址限制局域网内设备访问外网

    利用iptable设置防火墙: iptables -A INPUT -p tcp -m mac --mac-source 44:94:FC:25:68:8D --dport 80 -j DROP

  3. Buses and People CodeForces 160E 三维偏序+线段树

    Buses and People CodeForces 160E 三维偏序+线段树 题意 给定 N 个三元组 (a,b,c),现有 M 个询问,每个询问给定一个三元组 (a',b',c'),求满足 a ...

  4. HDU 4014 Jimmy’s travel plan(图计数)

    Jimmy’s travel plan Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Oth ...

  5. 垃圾回收器及tomcat调优

    垃圾回收机制 1.概述:垃圾回收机制,Java中的对象不再有"作用域"的概念,只有对象的引用才有"作用域".垃圾回收可以有效的防止内存泄露,有效的使用空闲的内存 ...

  6. 可视化操作,实现横向柱形echart图 无边框

    图片的实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  7. OC学习--面向对象的个人理解

    1. 什么是面向对象? 以下一段话是我在百度上找的解释: 面向对象(Object Oriented,OO)是软件开发方法.面向对象的概念和应用已超越了程序设计和软件开发,扩展到如数据库系统.交互式界面 ...

  8. qemu-kvm使用

    创建镜像qemu-img create -f qcow2 test-vm.qcow2 10g 修改镜像大小qemu-img  resize  test-vm.qcow2 +10G   安装系统 qem ...

  9. Sql 统计一个表有多少列

    SELECT COUNT(syscolumns.name) FROM syscolumns , sysobjects WHERE syscolumns.id = sysobjects.id AND s ...

  10. 一、VS支持Vue语法

    一.VS支持Vue语法