<!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. 如何释放linux cache占用的内存

    [root@prd-fygl-app-01 ~]# free -m             total       used       free     shared    buffers     ...

  2. [日志]logback告警

    开发过程中,难免会有发生错误或异常的时候,有些是需要及时通知到相关开发人员的.logback可以通过简单的配置达到邮件告警的目的. 一.错误告警 如下配置,所有Error级别的log发送邮件告警给re ...

  3. Java 可重入锁

    一般意义上的可重入锁就是ReentrantLock http://www.cnblogs.com/hongdada/p/6057370.html 广义上的可重入锁是指: 可重入锁,也叫做递归锁,指的是 ...

  4. [ARC061E]すぬけ君の地下鉄旅行 / Snuke's Subway Trip

    题目大意:Snuke的城镇有地铁行驶,地铁线路图包括$N$个站点和$M$个地铁线.站点被从$1$到$N$的整数所标记,每条线路被一个公司所拥有,并且每个公司用彼此不同的整数来表示. 第$i$条线路($ ...

  5. POJ_1703 并查集应用

    通过这题基本完整理解了并查集的构建和使用.很轻巧的一种数据结构. 本题的方法值得注意:并没有直接构建两个帮派的集合,而是构建: 关系确认集合+若干单元素集(也即未确认帮派的初始状态)并辅助一个rel数 ...

  6. C# 随机数生成避免重复

    public string GetMsgID() { Random rand = new Random((int)DateTime.Now.Ticks); string szRand = rand.N ...

  7. 【GAN】GAN的原理及推导

    把GAN的论文看完了, 也确实蛮厉害的懒得写笔记了,转一些较好的笔记,前面先贴一些 原论文里推理部分,进行备忘. GAN的解释 算法流程 GAN的理论推理 转自:https://zhuanlan.zh ...

  8. 2017 ACM/ICPC Asia 南宁区 L The Heaviest Non-decreasing Subsequence Problem

    2017-09-24 20:15:22 writer:pprp 题目链接:https://nanti.jisuanke.com/t/17319 题意:给你一串数,给你一个处理方法,确定出这串数的权值, ...

  9. 配置spring boot 内置tomcat的accessLog日志

    #配置内置tomcat的访问日志server.tomcat.accesslog.buffered=trueserver.tomcat.accesslog.directory=/home/hygw/lo ...

  10. ExtJs4.2.1中的Ext.grid.GridPanel选择行回车事件

    网上大多说的是“rowdblclick” 其实是“itemdblclick” 这个东西坑了我一上午.