vue-drag-resize是一個支持拖拽與縮放的vue插件，支持vue 1.x與2.x摘盆，使用方便，上手便利饱苟，具有以下的幾個特征：
輕量級孩擂，無依賴性
所有的操作都是可聯(lián)動的
支持觸摸事件
定義元素可拖拽，或者可縮放箱熬，或者二者兼有
提供用于調(diào)整大小的操作點與操作框
可以按照比例縮放或者不按照比例縮放元素
可限制拖拽的最大與最小值类垦、拖拽的范圍是否超出其父元素
可限制拖動的方向為垂直或水平軸
gitHib地址：?github.com/kirillmuras…
$ npm i -s vue-drag-resize
注冊為全局組件狈邑，在vue項目中注冊：
import Vue from 'vue' import VueDragResize from 'vue-drag-resize' Vue.component('vue-drag-resize', VueDragResize) 在任何組件中使用的時候，不用引入直接蚤认；
<vue-drag-resize：isActive = 'true'>
在需要的組件中引入：
? <template>
importVueDragResizefrom'vue-drag-resize';
exportdefault{
name:'app',
components: {
? ? ? ? ? VueDragResize
? ? ? },
? }
復(fù)制代碼
Type: Boolean || Required: false || Default: false
處于激活狀態(tài)的組件才能進行拖拽與縮放等操作米苹，狀態(tài)呈現(xiàn)激活狀態(tài)
Type: Boolean || Required: false || Default: true
Type: Boolean || Required: false || Default: true
Type: Boolean || Required: false || Default: false
設(shè)置為true，則會按照元素的元比例縮放砰琢≌核唬坑：定義了這個屬性，發(fā)現(xiàn)重新設(shè)置寬高的時候出現(xiàn)了異常（新值比例不同于舊值）陪汽，需要在重設(shè)寬高的時候把aspectRatio設(shè)置為false训唱，再將其設(shè)置回去，才能保證新值的等比例
Type: Number || Required: false || Default: 200
Type: Number || Required: false || Default: 200
Type: Number || Required: false || Default: 50
注意挚冤，不能設(shè)置為0况增，因為這個組件里面屬性要求大于0
Type: Number || Required: false || Default: 50
注意，不能設(shè)置為0训挡，因為這個組件里面屬性要求大于0
Type: Number || Required: false || Default: 0
Type: Number || Required: false || Default: 0
Type: Number || Required: false || Default: auto
注意在元素激活的時候澳骤，z會被設(shè)置為最高的，所以在管理z的時候要注意
Type: Array || Required: false || Default: ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']
tl -Topleft
tm -Topmiddle
tr-Topright
mr - Middleright
br-Bottomright
bm -Bottommiddle
bl -Bottomleft
ml - Middleleft
復(fù)制代碼
preventActiveBehavior 單擊組件外區(qū)域來禁止組件行為
Type: Boolean || Required: false || Default: false
設(shè)置這個屬性true澜薄，就可以解決在其他區(qū)域操作返回到組件區(qū)域的時候为肮，不需要再次點擊就激活組件
Type: Boolean || Required: false || Default: false
設(shè)置為true，則限制操作組件不能超出父級元素
Type: Number || Required: false || Default: 0
該值限制了元素可以拖動的水平最大寬度弥锄，前提是parentLimitation=true
Type: Number || Required: false || Default: 0
該值限制了元素可以拖動的水平最大高度籽暇，前提是parentLimitation=true
Type: Number || Required: false || Default: 1
Type: Number || Required: false || Default: 1
Type: String || Required: false || Default: both
取值可以為x饭庞、 y、 both绸狐、none
Type: String || Required: false
Type: String || Required: false
Required: false || Parameters: 組件實例
Required: false || Parameters: 無
Required: false || Parameters: object
{
left:Number,//the X position of the component
top:Number,//the Y position of the component
width:Number,//the width of the component
height:Number//the height of the component
}
復(fù)制代碼
Required: false || Parameters: object
object 同resizing的object
Required: false || Parameters: object
object 同resizing的object
Required: false || Parameters: object
object 同resizing的object
在拖拽元素里面添加input等類似的表單性元素符相，無法正常點擊操作，特別是focus無法做到趟脂，click也是經(jīng)常失效[攤手]
vue-drag-resize 的設(shè)計問題，在元素內(nèi)部只能觸發(fā)本元素镇眷，如果是有表單元素，只能被動的觸發(fā)；解決：
activateEv(index) {
console.log('activateEv'+index);
this.$refs['drag-input'].focus();
? }
復(fù)制代碼
怎么修改使點擊組件外面后圈驼，不需要點擊組件才能進行？
:preventActiveBehavior="true" 設(shè)置這個屬性，禁用點擊組件外事件
設(shè)置了組件的minh與minw,使用過程后臺一直報警告
minh跟minw注意臨界值玉锌。默認是50，查看源碼發(fā)現(xiàn)必須要大于0 ，不能為0涎才，這就是大部分開發(fā)人員后臺報警告的原因涛救。當然，如果想要設(shè)置為0蹭沛，可以重新定義屬性校驗規(guī)則
多個拖拽元素败徊，之前如何做到互斥？看github上的例子是互斥的沈自，實際用起來發(fā)現(xiàn)經(jīng)常性的無法互斥[攤手]
最佳的解決方案是使用數(shù)據(jù)去管理這些互斥的元素籍滴，可以在父級設(shè)置數(shù)據(jù)管理，或者引入vuex進行數(shù)據(jù)管理。關(guān)鍵點在點擊燎竖，拖拽构回，失焦的時候，做到對數(shù)據(jù)的精確管理
如何管理多個拖拽元素之間的zIndex？
這是必定會遇到并且無法逃避的一個問題纤掸，操作上需要保持當前激活的組件是最上層借跪，但是在總體上歇由，又要確保其圖層管理的初始谢谦。維護zIndex镜撩，并且注意在刪除與置換層級的時候?qū)?yīng)的數(shù)據(jù)修改预柒。如果被激活，就設(shè)定為一個最大的值袁梗，失去激活狀態(tài)淋袖，要恢復(fù)到初始值。
這個組件使用簡單锯梁，清楚明了即碗，我自己在用的時候，就是上手很快陌凳，但是要如何良好的應(yīng)用它剥懒，以及處理一些異常的情況下，還是有很多的坑合敦〕蹰伲基于這個組件，我實現(xiàn)了一個編輯器的平臺，后續(xù)會更新這個組件更實用的一些應(yīng)用實例保檐，以及如何與vuex結(jié)合耕蝉，實現(xiàn)一個基礎(chǔ)的h5編輯器平臺。再結(jié)合一些設(shè)置與多媒體的處理夜只，即可以實現(xiàn)諸如易企秀赔硫、Maka等這種h5定制化平臺。一步一步總可以實現(xiàn)的盐肃，加油鴨?
轉(zhuǎn)載于:https://juejin.im/post/5beb9423e51d4577f96e8d24
