vue 拖拽功能

来源：互联网发布：网络信息编辑：程序博客网时间：2024/06/01 08:50

<div id="box">

    <br>x:{{val.x}} <br>y:{{val.y}}    <div v-drag="greet" id="drag" :style="style">    //注意这里要通过指令绑定函数将当前元素的位置数据传出来    </div></div>
//移动端
Vue.directive('drag',//自定义指令  {    bind:function (el, binding) {      let oDiv = el;   //当前元素      let self = this;  //上下文      oDiv.ontouchstart = function (e) {        //鼠标按下，计算当前元素距离可视区的距离        let disX = e.touches[0].clientX - oDiv.offsetLeft;        let disY = e.touches[0].clientY - oDiv.offsetTop;        document.ontouchmove = function (e) {          //通过事件委托，计算移动的距离          let l = e.touches[0].clientX - disX;          let t = e.touches[0].clientY - disY;          //移动当前元素          oDiv.style.left = l + 'px';          oDiv.style.top = t + 'px';          //将此时的位置传出去          binding.value({x:e.pageX,y:e.pageY})        };        document.ontouchend = function (e) {          document.ontouchmove = null;          document.ontouchend = null;        };      };    }  })


//pc端
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;          
      }        
    } ,   
   });  
  }
原文来自https://segmentfault.com/a/1190000009134142

阅读全文

0 0