vue-drag-resize是一個支持拖拽與縮放的vue插件，支持vue 1.x與2.x，使用方便，上手便利，具有以下的幾個特征：
輕量級，無依賴性
所有的操作都是可聯動的
支持觸摸事件
定義元素可拖拽，或者可縮放，或者二者兼有
提供用于調整大小的操作點與操作框
可以按照比例縮放或者不按照比例縮放元素
可限制拖拽的最大與最小值、拖拽的范圍是否超出其父元素
可限制拖動的方向為垂直或水平軸
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
? ? ? },
? }
復制代碼
Type: Boolean || Required: false || Default: false
處于激活狀態的組件才能進行拖拽與縮放等操作，狀態呈現激活狀態
Type: Boolean || Required: false || Default: true
Type: Boolean || Required: false || Default: true
Type: Boolean || Required: false || Default: false
設置為true，則會按照元素的元比例縮放。坑：定義了這個屬性，發現重新設置寬高的時候出現了異常（新值比例不同于舊值），需要在重設寬高的時候把aspectRatio設置為false，再將其設置回去，才能保證新值的等比例
Type: Number || Required: false || Default: 200
Type: Number || Required: false || Default: 200
Type: Number || Required: false || Default: 50
注意，不能設置為0，因為這個組件里面屬性要求大于0
Type: Number || Required: false || Default: 50
注意，不能設置為0，因為這個組件里面屬性要求大于0
Type: Number || Required: false || Default: 0
Type: Number || Required: false || Default: 0
Type: Number || Required: false || Default: auto
注意在元素激活的時候，z會被設置為最高的，所以在管理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
復制代碼
preventActiveBehavior 單擊組件外區域來禁止組件行為
Type: Boolean || Required: false || Default: false
設置這個屬性true，就可以解決在其他區域操作返回到組件區域的時候，不需要再次點擊就激活組件
Type: Boolean || Required: false || Default: false
設置為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
}
復制代碼
Required: false || Parameters: object
object 同resizing的object
Required: false || Parameters: object
object 同resizing的object
Required: false || Parameters: object
object 同resizing的object
在拖拽元素里面添加input等類似的表單性元素，無法正常點擊操作，特別是focus無法做到，click也是經常失效[攤手]
vue-drag-resize 的設計問題，在元素內部只能觸發本元素，如果是有表單元素，只能被動的觸發；解決：
activateEv(index) {
console.log('activateEv'+index);
this.$refs['drag-input'].focus();
? }
復制代碼
怎么修改使點擊組件外面后，不需要點擊組件才能進行？
:preventActiveBehavior="true" 設置這個屬性，禁用點擊組件外事件
設置了組件的minh與minw,使用過程后臺一直報警告
minh跟minw注意臨界值。默認是50，查看源碼發現必須要大于0 ，不能為0，這就是大部分開發人員后臺報警告的原因。當然，如果想要設置為0，可以重新定義屬性校驗規則
多個拖拽元素，之前如何做到互斥？看github上的例子是互斥的，實際用起來發現經常性的無法互斥[攤手]
最佳的解決方案是使用數據去管理這些互斥的元素，可以在父級設置數據管理，或者引入vuex進行數據管理。關鍵點在點擊，拖拽，失焦的時候，做到對數據的精確管理
如何管理多個拖拽元素之間的zIndex？
這是必定會遇到并且無法逃避的一個問題，操作上需要保持當前激活的組件是最上層，但是在總體上，又要確保其圖層管理的初始。維護zIndex，并且注意在刪除與置換層級的時候對應的數據修改。如果被激活，就設定為一個最大的值，失去激活狀態，要恢復到初始值。
這個組件使用簡單，清楚明了，我自己在用的時候，就是上手很快，但是要如何良好的應用它，以及處理一些異常的情況下，還是有很多的坑。基于這個組件，我實現了一個編輯器的平臺，后續會更新這個組件更實用的一些應用實例，以及如何與vuex結合，實現一個基礎的h5編輯器平臺。再結合一些設置與多媒體的處理，即可以實現諸如易企秀、Maka等這種h5定制化平臺。一步一步總可以實現的，加油鴨?
轉載于:https://juejin.im/post/5beb9423e51d4577f96e8d24
