<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>实例方法</title>

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

 <meta name="apple-mobile-web-app-capable" content="yes">

 <meta name="apple-mobile-web-app-status-bar-style" content="black">

 <script src="../js/vue1.0.js"></script>

 <script src="../js/vue-resource.js"></script>

 <script>

  //自定义指令

  Vue.directive('drag',function(){

   var oDiv = this.el;

   oDiv.onmousedown = function(ev){

    var disX = ev.clientX -oDiv.offsetLeft;

    var disY = ev.clientY - oDiv.offsetTop;

    document.onmousemove = function(ev){

     var l = ev.clientX-disX;

     var t = ev.clientY-disY;

     oDiv.style.left = l+'px';

     oDiv.style.top = t+'px';

    };

    document.onmouseup = function(){

     document.onmousemove=null;

     document.onmouseup=null;

    };

   };

  });

  window.onload = function(){

   var vm = new Vue({

    el:'#box',

    data:{}

   });

  }

 </script>

</head>

<body>

<div id="box">

 <div v-drag :style="{width:'100px', height:'100px', background:'aqua', position:'absolute', right:0, top:0}">

 </div>

</div>

</body>

</html>

　　自定义键盘 信息

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>自定义键盘信息</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

  <meta name="apple-mobile-web-app-capable" content="yes">

  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <script src="../js/vue1.0.js"></script>

  <script src="../js/vue-resource.js"></script>

  <script>

    Vue.directive('on').keyCodes.ctrl=17;

    Vue.directive('on').keyCodes.myenter=13;

    window.onload = function(){

      var vm = new Vue({

        el:'#box',

        data:{},

        methods:{

          show:function(){

            alert(111);

          }

        }

      });

    }

  </script>

</head>

<body>

<div id="box">

  <input type="text" @keydown.ctrl="show">

  <hr>

  <input type="text" @keydown.myenter="show | debounce 2000">

</div>

</body>

</html>

　　

vue 自定义拖拽指令的更多相关文章

  1. Angular 自定义拖拽指令

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

  2. 基于Vue实现拖拽效果

    参考地址:基于Vue实现拖拽效果 参考链接中讲的比较详细,我只使用了其中自定义指令的方法.整体代码如下: <template> <!-- 卡片 --> <div clas ...

  3. 使dialog可拖拽指令

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

  4. Vue 可拖拽组件 Vue Smooth DnD 详解和应用演示

    本文发布自 https://www.cnblogs.com/wenruo/p/15061907.html 转载请注明出处. 简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好用的 Vu ...

  5. 基于vite3+tauri模拟QQ登录切换窗体|Tauri自定义拖拽|最小/大/关闭

    前两天有给大家分享tauri+vue3快速搭建项目.封装桌面端多开窗口.今天继续来分享tauri创建启动窗口.登录窗口切换到主窗口及自定义拖拽区域的一些知识.希望对想要学习或正在学习的小伙伴有些帮助. ...

  6. （原创）[C#] 一步一步自定义拖拽（Drag&Drop）时的鼠标效果：（一）基本原理及基本实现

    一.前言 拖拽(Drag&Drop),属于是极其常用的基础功能. 无论是在系统上.应用上.还是在网页上,拖拽随处可见.同时拖拽时的鼠标效果也很漂亮,像这样: 这样: 还有这样: 等等等等. 这 ...

  7. vue内容拖拽放大缩小

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 使div弹窗可拖拽指令

    在项目开发过程中,有些情况dialog弹窗,直接使用div模拟弹窗效果,并需要支持div可拖拽. div模拟弹窗效果: (1)在用于存放指令的文件夹内,新建js文件,命名为:drag.js.具体代码如 ...

  9. Vue实现拖拽穿梭框功能四种方式

    一.使用原生js实现拖拽 点击打开视频讲解更加详细 <html lang="en"> <head> <meta charset="UTF-8 ...

随机推荐

  1. OpenStack学习（二）

    虚机安装成功后,,学习虚机的管理 虚机的管理主要使用以下命令 1. 虚机的管理 a. 创建 virt-install --name=wintest01 --ram 512 --vcpus=2 --di ...

  2. 日志处理(三) logback 手动加载(转)

    本文转自:http://www.2cto.com/kf/201302/191149.html 一共两个java文件,第一个是例子,第二个是配置文件加载类; LogbackTest.java /* * ...

  3. 20145316《Java程序设计》第六周学习总结

    20143516许心远 <Java程序设计>第6周学习总结 教材学习内容总结 10.1.1 1.Java将输入/输出抽象化为串流,数据有来源及目的地,衔接两者的是串流对象. 2.若要将数据 ...

  4. 单元测试工具Nunit

    原文链接:http://blog.csdn.net/snowshinoy/article/details/6951352 调试 附加到: nunit-agent.exe进程:

  5. Java-JVM调优常见配置举例

    常见配置举例 堆大小设置JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理内存限制.32位系统 下,一般限制在1.5G~ ...

  6. python3.6连接mysql或者mariadb

    python3.6版本的安装查看上一篇文章 mysql或mariadb数据库的安装查看以前的文章,这里不再赘述 首先在mariadb数据库中创建相应的库和表: MariaDB [(none)]> ...

  7. 【前端】javaScript 常用技巧总结

    javaScript 常用技巧总结 1.  彻底屏蔽鼠标右键  oncontextmenu="window.event.returnValue=false" <table b ...

  8. linux下tar的使用方法

    1.仅打包 tar -cvf hello.tar hello (输出文件大小为10240) 2.打包后压缩成gzip压缩格式 tar -czvf hello.tar.gz hello (输出文件大小为 ...

  9. Caffe学习笔记（二）：Caffe前传与反传、损失函数、调优

    Caffe学习笔记(二):Caffe前传与反传.损失函数.调优 在caffe框架中,前传/反传(forward and backward)是一个网络中最重要的计算过程:损失函数(loss)是学习的驱动 ...

  10. GDOI2017 五一游玩记

    GDOI2017 到辣! 在五一比赛,成功躲了两天文化课. Day 0 早上睡到挺晚,想着同学在上课,我在睡觉,暗爽... 动车上,拿起电脑就是颓废,打模板!(然而真相是打了两个模板就开始颓了) 一天 ...