编程 Javascript

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

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

- Author -

阁下长的好生俊俏

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Use Word to Search for Files

Jun 15 Javascript

Node.js巧妙实现Web应用代码热更新

Oct 22 Javascript

JS提交form表单实例分析

Dec 10 Javascript

对象题目的一个坑理解Javascript对象

Dec 22 Javascript

javascript实现右下角广告框效果

Feb 01 Javascript

Vue.js 60分钟快速入门教程

Mar 28 Javascript

javascript 通过键名获取键盘的keyCode方法

Dec 31 Javascript

Angular动画实现的2种方式以及添加购物车动画实例代码

Aug 09 Javascript

Vue CLI2升级至Vue CLI3的方法步骤

May 20 Javascript

JavaScript Array对象基本方法详解

Sep 03 Javascript

JS实现躲避粒子小游戏

Jun 18 Javascript

JavaScript利用html5新方法操作元素类名详解

Nov 27 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