Maison  >  Article  >  interface Web  >  Utilisez Vue pour faire glisser et déposer DIV

Utilisez Vue pour faire glisser et déposer DIV

php中世界最好的语言
php中世界最好的语言original
2018-06-06 10:06:445403parcourir

Cette fois, je vais vous présenter quelles sont les précautions à prendre pour utiliser Vue pour glisser et déposer des DIV. Ce qui suit est un cas pratique, jetons un coup d'œil.

Rendu :

Code HTML :

<p id="box">                           
  位置
  <br>x:{{val.x}} <br>y:{{val.y}}
  <p v-drag="greet" id="drag" :style="style">
  //注意这里要通过指令绑定函数将当前元素的位置数据传出来
  </p>
</p>

Code JS :

Vue.directive('drag',//自定义指令                   
    {bind:function (el, binding) {
        let op = el;  //当前元素
        let self = this; //上下文
        op.onmousedown = function (e) {
         //鼠标按下,计算当前元素距离可视区的距离
          let disX = e.clientX - op.offsetLeft;
          let disY = e.clientY - op.offsetTop;
          document.onmousemove = function (e) {
           //通过事件委托,计算移动的距离 
            let l = e.clientX - disX;
            let t = e.clientY - disY;
           //移动当前元素 
            op.style.left = l + 'px';
            op.style.top = t + 'px';
             //将此时的位置传出去
            binding.value({x:e.pageX,y:e.pageY})
          };
          document.onmouseup = function (e) {
          
            document.onmousemove = null;
            document.onmouseup = null;
           };
        };
      }
    }
  );
  window.onload = function () {
    let vm = new Vue({
      el: '#box',
      data: {
        val: '123',
        style: {
          width: '100px',
          height: '100px',
          background: 'aqua',
          position: 'absolute',
          right: '30px',
          top: 0
        }
      },
      methods:{
      //接受传来的位置数据,并将数据绑定给data下的val
        greet(val){
          vm.val = val;
        }
      } ,
   });
  }

Croyez-le ou non Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention à d'autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Comment analyser les fichiers vue

React implémente le composant singleton (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn