Exemple de fonctionnalité de glisser-déposer personnalisée Vue

Voici le code de la fonction de glisser-déposer personnalisé de Vue partagé avec vous, voici le code spécifique ci-dessous :

 !DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8>
 <title>Methodes d'exemple</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>
  //Directive personnalisée
  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>

En regardons les informations personnalisées de la touche 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>

Les fonctionnalités personnalisées de déplacement et les informations de touche clavier de Vue que l'éditeur présente à tous, j'espère qu'elles vous seront utiles. Si vous avez des questions, n'hésitez pas à laisser un message, l'éditeur répondra à temps. Je remercie également vivement tous ceux qui soutiennent le site de tutorial d'hurlement !

Déclaration : Le contenu de cet article est extrait du réseau, propriété de l'auteur original, contenu contribué et téléversé par les utilisateurs d'Internet, ce site n'possède pas de propriété, n'a pas été traité par l'éditeur humain et n'assume pas de responsabilité juridique. Si vous trouvez du contenu soupçonné de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#w pour signaler, et fournir des preuves pertinentes.3Déclaration : Le contenu de cet article est extrait du réseau, propriété de l'auteur original, contenu contribué et téléversé par les utilisateurs d'Internet, ce site n'possède pas de propriété, n'a pas été traité par l'éditeur humain et n'assume pas de responsabilité juridique. Si vous trouvez du contenu soupçonné de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#w pour signaler, et fournir des preuves pertinentes. Une fois confirmé, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.

Tutoriel de base

Vous pourriez aimer