vue元件拖拽-矩形自由拖拽
最近公司有個需求，需要實現元件拖拽，實現方式:主要通過vue元件實現，通過在網上查詢資料，發現沒有真正符合需求的例子，但是有一些功能可以參考，無奈之下打算自己封裝一個，一方面也想證明一下自己的能力，此篇博文只是記錄一下，方便以後遇到此類問題，有個參考。
經過一段時間的研究需求發現需要實現元件的自由拖拽，以及放大縮小等功能，需要腳踏實地的一點一點的封裝，下面列舉一下主要實現的功能點：
1.封裝點元件 ，主要實現在容器內自由拖拽；
2.封裝正方形元件，和點元件結合使用，通過點元件建立8個座標點作為可拖拽的物件，根據點座標的位移實現正方形的放大縮小；
3.使用canvas實現建立各種圖形介面；
4.後期維護畫板功能，讓元件只能在一定區域內移動；
按照上一篇得到的可以自由放大縮小的矩形，下面開始點元件的封裝，目的實現矩形的位置自由擺放：
建立html：
<template>
<div class="square" v-customSquare ref="square">
<porint v-customPoint="1" :pointType="1" :isShow="showPoint" @movePoint="movePoint1"></porint>
<porint v-customPoint="2" :pointType="2" :isShow="showPoint" @movePoint="movePoint2"></porint>
<porint v-customPoint="3" :pointType="3" :isShow="showPoint" @movePoint="movePoint3"></porint>
<porint v-customPoint="4" :pointType="4" :isShow="showPoint" @movePoint="movePoint4"></porint>
<porint v-customPoint="5" :pointType="5" :isShow="showPoint" @movePoint="movePoint5"></porint>
<porint v-customPoint="6" :pointType="6" :isShow="showPoint" @movePoint="movePoint6"></porint>
<porint v-customPoint="7" :pointType="7" :isShow="showPoint" @movePoint="movePoint7"></porint>
<porint v-customPoint="8" :pointType="8" :isShow="showPoint" @movePoint="movePoint8"></porint>
<div class="draggable" @mousedown="move"></div>
</div>
</template>
這裡的程式碼和上一篇程式碼幾乎差不多，但是多了一個div,主要就是通過這個div來實現矩形的自由拖拽。請檢視css程式碼：
<style lang="scss">
.draggable{
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
</style>
看到這裡，大家就應該差不多明白了，實際上這個div 就是覆蓋了 元件內容，通過給div 繫結 mousedown事件，不瞭解的可以看上一篇程式碼，已經給出詳細示例：
move(evt){
let odiv = evt.target;// 獲取目標元素
let parentObj = evt.path[1];
let parentPositionWidth = parentObj.style.width.split('p')[0] * 1;
let parentPositionLeft = parentObj.style.left.split('p')[0]* 1;
let parentPositionTop = parentObj.style.top.split('p')[0]*1;
let parentPositionHeight = parentObj.style.height.split('p')[0] * 1;
let x = evt.clientX - odiv.offsetLeft;
let y = evt.clientY - odiv.offsetTop;
document.onmousemove = (e) => {
let left = e.clientX - x;
let top = e.clientY - y;
if(left<= -parentPositionLeft){
left =-parentPositionLeft;
}
if (top <= -parentPositionTop) {
top = -parentPositionTop;
}
if (left >= this.drawingBoardWidth - odiv.offsetWidth - parentPositionLeft){
left =this.drawingBoardWidth - odiv.offsetWidth- parentPositionLeft;
}
if (top >= this.drawingBoardHeight -odiv.offsetHeight - parentPositionTop){
top = this.drawingBoardHeight -odiv.offsetHeight - parentPositionTop;
}
parentObj.style.left = parentPositionLeft + left + 'px';
parentObj.style.top = (parentPositionTop+top)+'px';
}
// 為了防止 火狐瀏覽器 拖拽陰影問題
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
}
}
下一篇將更新在畫板裡動態建立元件。