Vueのカスタムディレクティブのドラッグ＆ドロップ機能の例

以下に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カスタムディレクティブのドラッグ機能およびキーボード情報です。皆さんに役立つことを願っています。何かご不明な点がございましたら、コメントを残してください。編集者は皆さんの質問に迅速に回答します。また、このノートラウルチュートリアルウェブサイトへのサポートに感謝しています！

声明：この記事の内容はインターネットから収集され、著作権者に帰属します。インターネットユーザーが自発的に貢献し、アップロードした内容です。このウェブサイトは所有権を持ちません。人工的な編集は行われていません。また、関連する法的責任を負いません。著作権侵害が疑われる内容がある場合は、メールを送信してください：notice#oldtoolbag.com（メールを送信する際、#を@に置き換えてください。告発を行い、関連する証拠を提供してください。一旦確認がとれましたら、このサイトは即座に侵害疑いのコンテンツを削除します。

基本教程