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 相关文章推荐
javascript+iframe 实现无刷新载入整页的代码
Mar 17 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
js加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
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图片验证码代码
2008/03/27 PHP
php实现的CSS更新类实例
2014/09/22 PHP
分享10段PHP常用代码
2015/11/11 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
js中定义一个变量并判断其是否为空的方法
2014/05/13 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
对于Python深浅拷贝的理解
2019/07/29 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
django创建超级用户过程解析
2019/09/18 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
网络工程专业自荐信范文
2014/03/16 职场文书
给孩子的新年寄语
2014/04/08 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书