此案例中，用到了鼠标事件onmousedown、onmousemove、onmouseup

源代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer div{
            position:absolute;
            width: 100px;
            height: 100px;
        }
        .outer .left{
            background-color: red;
            top:0;
            left:0;
        }
        .outer .right{
            background-color: blue;
            top:0;
            right:0;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="outer">
        <div class="left" v-drag></div>
        <div class="right" v-drag></div>
    </div>
</div>
<script src="vue.js"></script>
<script>
    Vue.directive('drag',function(el){
        el.onmousedown = function(e){
            //获取鼠标点击处分别与div左边和上边的距离：鼠标位置-div位置
            var divx = e.clientX - el.offsetLeft;
            var divy = e.clientY - el.offsetTop;
            //包含在onmousedown里，表示点击后才移动，为防止鼠标移出div，使用document.onmousemove
            document.onmousemove = function(e){
                //获取移动后div的位置：鼠标位置-divx/divy
                var l = e.clientX - divx;
                var t = e.clientY - divy;
                el.style.left=l+'px';
                el.style.top=t+'px';
            }
            document.onmouseup = function(e){
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }

    })
   var vm = new Vue({
       el:'#app'

   })
</script>
</body>
</html>

vue自定义指令之拖动页面的元素的更多相关文章

  1. vue自定义指令clickoutside扩展--多个元素的并集作为inside

    都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...

  2. vue自定义指令clickoutside实现点击其他元素才会触发

    clickoutside.js // 代码内容 const clickoutsideContext = '@@clickoutsideContext'; export default { bind(e ...

  3. Vue自定义指令使用场景

    当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...

  4. vue 自定义指令的魅力

    [第1103期]vue 自定义指令的魅力 点点 前端早读课 2017-11-08 前言 很多事情不能做过多的计划,因为计划赶不上变化.今日早读文章由富途@点点翻译分享. 正文从这开始- 在你初次接触一 ...

  5. vue 自定义指令（directive）实例

    一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href  v-bind:class  v-bind:title  v-bind:bb 2.v-on:用于监听DOM事件: 例 ...

  6. Vue | 自定义指令和动态路由实现权限控制

    功能概述: 根据后端返回接口,实现路由动态显示 实现按钮(HTML元素)级别权限控制 涉及知识点: 路由守卫 Vuex使用 Vue自定义指令 导航守卫 前端工程采用Github开源项目Vue-elem ...

  7. vue自定义指令

    Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...

  8. vue自定义指令(Directive中的clickoutside.js)的理解

    阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...

  9. vue自定义指令clickoutside使用以及扩展用法

    vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...

随机推荐

  1. js实现iframe刷新

    今天要用到iframe的框架刷新,在网上找到了关于这方面内容,整理如下: (1)一般页面的刷新——reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForc ...

  2. iOS开发之IMP和SEL（方法和类的反射）

    1.SEL:类方法的指针,相当于一种编号,区别与IMP! IMP:函数指针,保存了方法的地址! SEL是通过表取对应关系的IMP,进行方法的调用! 2.获取SEL和IMP方法和调用: SEL meth ...

  3. 反编译之paktool工具

    1.官网配置mac教程https://ibotpeaches.github.io/Apktool/install/ (1)右键选择:链接储存为(命名:apktool,格式:选择所有文件): (2)下载 ...

  4. Python基础---序列对象

    一.序列简介 数据结构是通过某种方式组织在一起的元素的集合. 容器(Container)是一种Python的数据结构,基本上是包含其他对象的任意对象.序列和映射(如字典)是两类主要的容器.集合(Set ...

  5. <每日一题>题目29：五个数字能组成多少互不重复的四位数

    #有五个数字:1.2.3.4.5,能组成多少个互不相同且无重复数字的四位数?各是多少? e =[] for a in range(1,6): for b in range(1,6): for c in ...

  6. 阿里巴巴毕玄解密AIOps：一文读懂阿里巴巴运维体系的前世今生

    [编者按]林昊(毕玄),阿里巴巴研发效能事业部负责人.2007年加入阿里,10年间打造了阿里目前使用最为广泛的核心中间件之一的服务框架:建设了阿里的HBase团队,发展到今天HBase已经是阿里最重要 ...

  7. Neo4j删除节点和关系、彻底删除节点标签名

    https://www.jianshu.com/p/59bd829de0de 总结提前: [1]先删关系,再删节点 [2]当记不得关系名时,type(r)可以查到关系名 [3]彻底删除节点标签名,需要 ...

  8. [转]C#中的委托和事件(续)

    源码下载:http://www.tracefact.net/SourceCode/MoreDelegate.rar C#中的委托和事件(续) 引言 如果你看过了 C#中的委托和事件 一文,我想你对委托 ...

  9. urllib与urllib2的学习总结

    先啰嗦一句,我使用的版本是python2.7,没有使用3.X的原因是我觉得2.7的扩展比较多,且较之前的版本变化不大,使用顺手.3.X简直就是革命性的变化,用的蹩手.3.x的版本urllib与urll ...

  10. cf519E

    传送门 多组询问,问到树上两个点x,y距离相等的点的个数. 倍增求lca. //Twenty #include<cstdio> #include<cstdlib> #inclu ...