<!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. java中boolean类型占几个字节

    java的基本数据类型中,boolean只有两种状态,默认值为false.取值范围是{true,false},理论上占1bit,实际上: 1.单个的boolean 类型变量在编译的时候是使用的int ...

  2. FFmpeg 入门(1)：截取视频帧

    本文转自:FFmpeg 入门(1):截取视频帧 | www.samirchen.com 背景 在 Mac OS 上如果要运行教程中的相关代码需要先安装 FFmpeg,建议使用 brew 来安装: // ...

  3. C++ 第三十三天

    Ⅰ.类成员函数的隐式参数 T *const this . 就是说对于某个类的成员函数 returnType function() 的真实面目其实是这样的 returnType function(T * ...

  4. WPF和Sliverlight不同之UIElement-事件

    WPF: http://msdn.microsoft.com/en-us/library/System.Windows.UIElement.aspx DragEnter DragLeave DragO ...

  5. linux中断的下半部机制

    一.中断处理为什么要下半部?Linux在中断处理中间中断处理分了上半部和下半部,目的就是提高系统的响应能力和并发能力.通俗一点来讲:当一个中断产生,调用该中断对应的处理程序(上半部)然后告诉系统,对应 ...

  6. 高手用的SourceInsight配置文件——仿Sublime风格【转】

    本文转载自:https://blog.csdn.net/weixin_38233274/article/details/80209100 配置文件下载地址:https://download.csdn. ...

  7. go语言中strings包中的Trim函数的作用是什么

    答:Trim函数原型如下: func Trim(s string, cutset string) string 去掉字符串s中首部以及尾部与字符串cutset中每个相匹配的字符,如: s=" ...

  8. Maven错误recv failed

    问题:     从SVN上检出了一个Maven项目,在执行clean命令时,出现如下错误: java.net.SocketException:Software caused connection ab ...

  9. PHP的memory_limit引起的问题

    在运行PHP程序,通常会遇到下面的错误, 这个意味着PHP脚本使用了过多的内存,并超出了系统对其设置的允许最大内存.解决这个问题,首先需要查看你的程序是否分配了过多的内存,在程序没有问题的情况下,你可 ...

  10. 多线程资源隔离之ThreadLocal

    上篇讲到多线程线程安全问题的解决思路,这篇将详细讲解资源隔离ThreadLocal的实践. ThreadLocal也叫线程局部变量,类似Map结构,以当前线程为key.既然是以资源隔离的思想保证线程安 ...