Implémenter la fonction glisser-déposer basée sur Vue

Cet article présente principalement en détail la fonction glisser-déposer de Vue. Faire glisser le bloc pour déplacer a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Les exemples de cet article sont partagés avec vous. Le code spécifique permettant à Vue d'implémenter la fonction glisser-déposer est fourni pour votre référence. Le contenu spécifique est le suivant

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;
        }
      } ,
   });
  }

Recommandations associées :

vue-simplemde implémente la fonction glisser-coller d'image (avec code)

Exemple de chat basé sur vue.js et webpack

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!