Implementieren Sie eine Drag-and-Drop-Funktion basierend auf Vue

In diesem Artikel wird hauptsächlich die Drag-and-Drop-Funktion von Vue im Detail vorgestellt. Das Ziehen des Blocks zum Verschieben hat einen gewissen Referenzwert.

Die Beispiele in diesem Artikel werden mit Ihnen geteilt. Der spezifische Code für Vue zum Implementieren der Drag-and-Drop-Funktion wird als Referenz bereitgestellt. Der spezifische Inhalt lautet wie folgt:

HTML-Code:

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

JS-Code:

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

Verwandte Empfehlungen:

vue-simplemde Implementieren Sie die Funktion zum Ziehen und Einfügen von Bildern (mit Code)

Chat-Beispiel basierend auf vue.js und Webpack

Das obige ist der detaillierte Inhalt vonImplementieren Sie eine Drag-and-Drop-Funktion basierend auf Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!