基于Vue实现拖拽功能


            本文实例为大家分享了Vue实现拖拽功能的具体代码，供大家参考，具体内容如下



效果图：



HTML代码：





<div id="box">                           

  位置

  <br>x:{{val.x}} <br>y:{{val.y}}

  <div v-drag="greet" id="drag" :style="style">

  //注意这里要通过指令绑定函数将当前元素的位置数据传出来

  </div>

</div>



JS代码：







Vue.directive('drag',//自定义指令                   



    {bind:function (el, binding) {

        let oDiv = el;  //当前元素

        let self = this; //上下文

        oDiv.onmousedown = function (e) {

         //鼠标按下，计算当前元素距离可视区的距离

          let disX = e.clientX - oDiv.offsetLeft;

          let disY = e.clientY - oDiv.offsetTop;



          document.onmousemove = function (e) {

           //通过事件委托，计算移动的距离 

            let l = e.clientX - disX;

            let t = e.clientY - disY;

           //移动当前元素 

            oDiv.style.left = l + 'px';

            oDiv.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;

        }

      } ,

   });

  }







以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。