此案例中，用到了鼠标事件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. 网页多媒体 flash

    网页上的视频一般都是Flash格式的,因为Flash的兼容性比较好,再一个Flash文件的压缩以后文件较小. 提示:Flash动画的文件扩展名:.swf 以Flash动画为例,播放Flash动画的代码 ...

  2. Could not resolve placeholder 'CUST_INDUSTORY' in string value "${CUST_INDUSTORY}"

    问题描述 项目中的资源文件中写了个properties文件,内容这样的 CUST_FROM=002 CUST_INDUSTORY=001 CUST_LEVEL=006 在springmvc配置文件中加 ...

  3. CAS服务端配置

    1. 产生SERVER的证书库文件 ketool工具详细运用:http://www.micmiu.com/lang/java/keytool-start-guide/ 首先确保jdk环境变了正确配置才 ...

  4. springcloud 使用RabbitMq

    新建一个项目,三个module 分别为eureka-server,config-server,config-client, eureka-server 的pom.xml, <?xml versi ...

  5. Groupadd- Linux必学的60个命令

    1.作用 groupadd命令用于将新组加入系统. 2.格式 groupadd [-g gid] [-o]] [-r] [-f] groupname 3.主要参数 -g gid:指定组ID号. -o: ...

  6. 阿里云安全研究成果入选人工智能顶级会议 IJCAI 2019， 业界首次用AI解决又一难题！

    8月10日至8月16日,国际人工智能组织联合会议IJCAI 2019(International Joint Conference on Artificial Intelligence 2019)在中 ...

  7. exit()和return语句的区别

    (1)exit用于结束正在运行的程序,exit函数将参数是返回给OS.而return是返回函数值并退出函数. (2)return是语言级别的,它表示了调用堆栈的返回:而exit是系统调用级别的,它表示 ...

  8. BZOJ 1933 [Shoi2007]Bookcase 书柜的尺寸

    神奇的dp优化. 考虑6维状态的dp,分别表示三行高和宽,显然MLE&&TLE. 把高排个序,从大到小往架上放,那么若不是重开一行便对高度没有影响. 然后求出宽度的sum,dp[i][ ...

  9. 原 JEECMS导入IDEA进行二次开发图文教程

    JEECMS导入IDEA进行二次开发图文教程 2017年05月15日 17:03:53 Swain_Ho 阅读数 3257    版权声明:本文为博主原创文章,未经博主允许不得转载. https:// ...

  10. .h头文件 .lib动态链接库文件 .dll 动态链接库

    (1).h头文件是编译时必须的,lib是链接时需要的,dll是运行时需要的. 附加依赖项的是.lib 不是.dll 若生成了DLL ,则肯定也生成 LIB文件 如果要完成源代码的编译和链接,有头文件和 ...