Vue自定义指令拖拽功能示例


Posted in Javascript onFebruary 17, 2017

下面给大家分享vue自定义指令拖拽功能代码,具体代码如下所示:

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

下面看下Vue自定义键盘信息

<!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自定义指令拖拽功能及键盘信息,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Js之软键盘实现(js源码)
Jan 30 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
jquery中选择块并改变属性值的方法
Jul 31 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
老生常谈js中的MVC
Jul 25 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 Javascript
javascript实现计算器功能详解流程
Nov 01 Javascript
教你一步步实现一个简易promise
Nov 02 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 #Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 #Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 #Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 #Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 #Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 #Javascript
浅析JavaScript中var that=this
Feb 17 #Javascript
You might like
一个经典的PHP文件上传类分享
2014/11/18 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
JS中递归函数
2016/06/17 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
详解Python中with语句的用法
2015/04/15 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
Python闭包函数定义与用法分析
2018/07/20 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
工程预算与管理应届生求职信
2013/10/06 职场文书
中文教师求职信
2014/02/22 职场文书
财务工作检讨书
2014/10/29 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
大学军训决心书
2015/02/05 职场文书
少先队工作总结2015
2015/05/13 职场文书
工商局调档介绍信
2015/10/22 职场文书