此案例中，用到了鼠标事件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. IOS 检测摇晃 几个问题

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://kyoworkios.blog.51cto.com/878347/1152692 ...

  2. 《DSP using MATLAB》Problem 8.30

    10月1日,新中国70周岁生日,上午观看了盛大的庆祝仪式,整齐的方阵,先进的武器,尊敬的先辈英雄,欢乐的人们,愿我们的 国家越来越好,人民生活越来越好. 接着做题. 代码: %% ---------- ...

  3. Nodejs之路（二）—— Nodejs再入门

    一.在Node中使用模板引擎 js代码: // art-template不仅可以在浏览器使用,也可以在node中使用 // 1.安装 npm install art-temlate模板引擎 // 2. ...

  4. elasticsearch 中文API 获得(三)

    获取API 获取API允许你通过id从索引中获取类型化的JSON文档,如下例: GetResponse response = client.prepareGet("twitter" ...

  5. HBase Ambari

  6. 网络结构解读之inception系列四：Inception V3

    网络结构解读之inception系列四:Inception V3   Inception V3根据前面两篇结构的经验和新设计的结构的实验,总结了一套可借鉴的网络结构设计的原则.理解这些原则的背后隐藏的 ...

  7. 阿里云 Aliplayer高级功能介绍(六)：进度条标记

    基本介绍 Aliplayer在进度条上提示时间和缩略图功能外,还可以进行视频内容的提示打点,当然不止是进度条上显示打点的内容,还提供一组接口,方便用户进行打点时间和内容的获取, 基本UI如下图所示: ...

  8. devc++读取不了当前目录下的文件

    devc++在当前目录新建了一个文件之后,用文件读取的操作报错:     如图所示:           解决方案: 先把该文件从左侧工作空间中移除:       移除之后就没了:         再 ...

  9. switch的练习

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  10. 2019-5-25-如何在-CMD-启动的软件传入带空格的路径

    title author date CreateTime categories 如何在 CMD 启动的软件传入带空格的路径 lindexi 2019-05-25 09:31:46 +0800 2019 ...