VUE自定義指令實現滑鼠拖拽
阿新 • • 發佈：2018-12-27
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>練習：自定義指令 實現元素的拖拽</title> <script src="js/vue.js"></script> <style> #itany div{ width: 100px; height: 100px; position:absolute; } #itany .hello{ background-color:red; top:0; left:0; } #itany .world{ background-color:blue; top:0; right:0; } </style> </head> <body> <div id="itany"> <div class="hello" v-drag>itany</div> <div class="world" v-drag>網博</div> </div> <script> Vue.directive('drag',function(el){ el.onmousedown=function(e){ //獲取滑鼠點選處分別與div左邊和上邊的距離：滑鼠位置-div位置 var disX=e.clientX-el.offsetLeft; var disY=e.clientY-el.offsetTop; console.log(disX,disY); //包含在onmousedown裡面，表示點選後才移動，為防止滑鼠移出div，使用document.onmousemove，點選後再移動 //使用document.onmousemove，不要使用el.onmousemmove //在這個文件裡出不去 document.onmousemove=function(e){ //獲取移動後div的位置：滑鼠位置-disX/disY var l=e.clientX-disX; var t=e.clientY-disY; el.style.left=l+'px'; //必須要有單位 el.style.top=t+'px'; } //停止移動，滑鼠彈起 document.onmouseup=function(e){ document.onmousemove=null; document.onmouseup=null; } } }); var vm=new Vue({ el:'#itany', data:{ msg:'welcome', username:'alice' }, methods:{ change(){ this.msg='animals' } } }); </script> </body> </html>
程式碼注意：
- VUE自定義指令實現的方式，Vue.directive();
- 自定義指令使用的方式必須加v-;
- 拖拽功能思路：是把要拖拽的DOM的position:設定為absolute,這樣就可以基於父視窗，或者根元素進行展示；
- 先在自定義指令中獲取DOM元素，然後設定onmousedown事件，獲取點選的位置座標，然後就是小演算法計算位置的問題；
- 移動使用document.onmousemove，不要使用el.onmousemove
- 移動結束後，即滑鼠彈起後，要把onmousemove和onmouseup事件清除；