<!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的String

    String.valueOf()      将其他类型的值转换成字符串类型 String.intern()          该方法会将字符串常量池中的字符串与外部的字符串(s)进行比较,如果共享池中 ...

  2. weblogic 清除缓存

    清理缓存步骤如下: 1.前置条件:停止服务 2.找到下面3个目录,然后将里面的文件删除即可: ……/user_projects/domains/base_domain/servers/AdminSer ...

  3. union遇上ntext数据类型

    http://www.myhack58.com/Article/html/3/7/2011/31392.htm

  4. centos安装xdebug 和 phpstorm+Xdebug断点调试PHP

    转载地址:http://www.2cto.com/os/201304/206058.html   CentOS下安装xdebug   在CentOS 6.x 的系统中,是集成xdebug 的,   y ...

  5. REST API Design

  6. nfs挂载

    安装: yum install nfs-utils rpcbind 配置共享目录:vim /etc/exports /xxx/cloudcms *(insecure,rw,async,no_root_ ...

  7. IoC控制反转与DI依赖输入

    IoC (Inversion of Control)即控制反转,是面向对象编程中的一种设计原则.它把传统上由程序代码直接操控的对象的调用权交给容器,通过外部容器来实现对象组件的装配和管理. 简单来说, ...

  8. nginx结合fastcgi

    1.首先安装nginx,这里采用编译安装 useradd -M -s /sbin/nologin nginx 安装一些依赖包: yum -y install pcre-devel libxslt-de ...

  9. 索引原理-btree索引与hash索引的区别

    btree索引与hash索引的区别,之前不清楚,mark一下. Hash索引结构的特殊性,其检索效率非常高,索引的检索可以一次定位,不像B-Tree索引需要从根节点到枝节点,最后才能访问到页节点这样多 ...

  10. Http中Get和Post的区别（转载）

    在B/S应用程序中,前台与后台的数据交互,都是通过HTML中Form表单完成的.Form提供了两种数据传输的方式——get和post.虽然它们都是数据的提交方式,但是在实际传输时确有很大的不同,并且可 ...