<!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. 某个php爬虫程序分析--来自wooyun

    乌云漏洞编号: WooYun-2014-68061 作者:hkAssassin 爬虫程序源码: <?php header("content-type:text/html;charset ...

  2. ubuntu中mysql版本升级到5.7

    0 前言 前几天图书馆说服务器(Ubuntu14.04)有安全漏洞,不按时修复会关停. 看了一下漏洞清单,主要是ssh和mysql的版本问题. 把mysql升级了一下,升到了5.7,升级之前还备份了数 ...

  3. vue package.json 解析

    vue package.json 中可以看到这个包的来源位置 在repository对象中的url中可以看到     所以当你要封装自己包的时候就可以改变这个地址去加载这个包(把你封装的包发到某个gi ...

  4. python-静态方法staticmethod、类方法classmethod、属性方法property

    Python的方法主要有3个,即静态方法(staticmethod),类方法(classmethod)和实例方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 def  ...

  5. SQL学习笔记之MySQL索引知识点

    0x00 概述 之前写过一篇Mysql B+树学习,简单的介绍了B+数以及MySql使用B+树的原因, 有了这些基础知识点,对MySql索引的类型以及索引使用的一些技巧,就比较容易理解了. 0x01 ...

  6. RN中有两种方式使用全局变量

    1.通过导入导出文件的方式 新建constants.js文件 const object = { website:'http://www.hao123.com', name:'好123', }; exp ...

  7. System.IO命名空间下常用的类

    System.IO System.IO.Directory 目录 System.IO.Path 文件路径(包含目录和文件名) System.IO.FileInfo 提供创建.复制.删除.移动和打开文件 ...

  8. HTML请求与相应

    HTTP的请求与响应 HTTP通信由两部分组成: 客户端请求消息 与 服务器响应消息 浏览器发送HTTP请求的过程: 当用户在浏览器的地址栏中输入一个URL并按回车键之后,浏览器会向HTTP服务器发送 ...

  9. elasticsearch系列（三）库表理解

    首先ES没有库和表的概念,只有index,type,document(详细术语可以看ES的系列一 http://www.cnblogs.com/ulysses-you/p/6736926.html), ...

  10. gTest&gMock learning

    在C++中,编写服务后的一种测试方式是使用google的gTest和gMock结合 之前写py,测试方式是将服务挂起,使用工具模拟请求发包,check resp,这样的缺点在于不方便,即使存下了所有的 ...