此案例中，用到了鼠标事件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. echarts的使用——vue

    在vue的项目开发中,数据的可视化可以用echarts来实现,具体用法如下: (1)安装echarts,进入项目目录,执行如下命令,安装echarts: npm install echarts (2) ...

  2. .Net StackFrame

    StackFrame指的是一个.net运行的时候堆栈上的一个帧(Frame),每次进入一个方法的时候就会有一个新的方法帧压入线程执行堆栈,可以通过StackFrame获取相关的信息,比如当前代码所在文 ...

  3. PAT甲级——A1074 Reversing Linked List

    Given a constant K and a singly linked list L, you are supposed to reverse the links of every K elem ...

  4. ucore 地址映射的几个阶段

    第零阶段: 启动之后的实模式阶段 vir = lin = pa 第一阶段 : 启动 bootloader 的段式分页 这里段基址是0 ,所以地址空间维持不变 vir addr = lin addr = ...

  5. 在VisualSVN创建新的Repository

    1,右键-创建 2,(暂时还没明白这两个选项的区别,暂时先使用第一个) 3, 库名称 4,(也不懂具体含义, 先默认) 5, 权限问题 6, 在需要用到这个库的工作文件夹内点击右键: -SVN检出 7 ...

  6. 深入了解组件- -- 动态组件 & 异步组件

    gitHub地址:https://github.com/huangpna/vue_learn/example里面的lesson11 一 在动态组件上使用keep-alive 在这之前我们已经有学习过用 ...

  7. [转]模块化——Common规范及Node模块实现

    Node在实现中并非完全按照CommonJS规范实现,而是对模块规范进行了一定的取舍,同时也增加了少许自身需要的特性.本文将详细介绍NodeJS的模块实现 引入 nodejs是区别于javascrip ...

  8. 各ui库项目结构

    饿了么的ui组件库 sass build:webpack配置文件 examples: element api的页面文档 packages: 放置组件  css放在./theme-chalk 下 src ...

  9. VS中添加配置X86平台

    最近IIS发布程序时,总是容易碰到下面的错误.这个错误网上绝大部分都是提出在VS把解决方案设置为在X86平台生成,然后再发布.但是查看应用程序后发现没有X86平台选项,下面是添加X86目标平台的方法.

  10. 左神算法书籍《程序员代码面试指南》——1_08构造数组的MaxTree

    [题目] 将一个没有重复数字的数组中的数据构造一个二叉树 每个节点都是该子树的最大值 [要求] 时间复杂度为O(N)[题解] 使用单调栈,栈的顺序是维持从大到小排序 通过使用单调栈,将数组中中所有数的 ...