# vue-drag-resize套件 16

###### tags: `vue`
vue-drag-resize是一個有趣的套件，可以把它當成可以拖動的div。

篇文章是參考https://github.com/kirillmurashov/vue-drag-resize

### 安裝
開啟cmd到專案資料夾打

npm i -s vue-drag-resize

下載好後，要做引入的動作。
到main.js裡輸入

import VueDragResize from 'vue-drag-resize'

Vue.component('vue-drag-resize', VueDragResize)

---

### 範例

接著創建一個vue檔，就可以開始用了。

以下是他的基本架構:

<template>
  <div >
    <div id="bgbg">
      <vue-drag-resize :isActive="true"  @resizing="resize" @dragging="resize"
      :w="100" :h="100"
      >
              <h3>test</h3>
              <p>{{ top }} х {{ left }} </p>
              <p>{{ width }} х {{ height }}</p>
      </vue-drag-resize>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
/*eslint-disable*/
export default {
  data:()=>({
     width: 0,
     height: 0,
     top: 0,
     left: 0,
  }),
  components: {
  },
  methods:{
    resize(newRect) {
        this.width = newRect.width;
        this.height = newRect.height;
        this.top = newRect.top;
        this.left = newRect.left;
    },
  }
}
</script>
<style  scoped>
#bgbg{
  position: relative;
  height:400px;
  width: 400px;
  background-color:skyblue;
  margin:0 auto;
}
</style>

我將它新增在一個div裡，
:w="100" :h="100" 表示長寬大小
@resizing 表示監聽其大小改變時會執行resize function @dragging 表示監聽其被拖曳時會執行resize function
resize function:用來監聽其top、left值和長寬值

---

加入:aspectRatio="true"，會在控制大小時，等比例更改

      <vue-drag-resize :isActive="true"  @resizing="resize" @dragging="resize"
      :w="100" :h="100"
      :aspectRatio="true"
      >
              <h3>test</h3>
              <p>{{ top }} х {{ left }} </p>
              <p>{{ width }} х {{ height }}</p>
      </vue-drag-resize>

加入 :minw :minh ，限制其最小大小

    <div id="bgbg">
      <vue-drag-resize :isActive="true"  @resizing="resize" @dragging="resize"
      :w="100" :h="100"
      :minw="40"
      :minh="40"
      >
              <h3>test</h3>
              <p>{{ top }} х {{ left }} </p>
              <p>{{ width }} х {{ height }}</p>
      </vue-drag-resize>
    </div>

加入parentScaleX parentScaleY，控制其移動和縮放的幅度(參數愈大愈慢)。

      <vue-drag-resize :isActive="true"  @resizing="resize" @dragging="resize"
      :w="100" :h="100"
      :parentScaleX="10"
      :parentScaleY="10"
      >
              <h3>test</h3>
              <p>{{ top }} х {{ left }} </p>
              <p>{{ width }} х {{ height }}</p>
      </vue-drag-resize>

加入:x :y 控制生成時的位置。

      <vue-drag-resize :isActive="true"  @resizing="resize" @dragging="resize"
      :w="100" :h="100"
      :x="100"
      :y="100"
      >
              <h3>test</h3>
              <p>{{ top }} х {{ left }} </p>
              <p>{{ width }} х {{ height }}</p>
      </vue-drag-resize>

加入:stickSize 修改調整大小的按鈕大小

      <vue-drag-resize :isActive="true"  @resizing="resize" @dragging="resize"
      :w="100" :h="100"
      :stickSize="5"
      >
              <h3>test</h3>
              <p>{{ top }} х {{ left }} </p>
              <p>{{ width }} х {{ height }}</p>
      </vue-drag-resize>

加入isDraggable isResizable，值為true or false，isDraggable控制是否開啟拖曳功能，isResizable控制是否開啟縮放功能

      <vue-drag-resize :isActive="true"  @resizing="resize" @dragging="resize"
      :w="100" :h="100"
      :isDraggable="true"
      :isResizable="true"
      >

加入parentLimitation，值為true or false，控制縮放和拖曳是否能超過父元素。

      <vue-drag-resize :isActive="true"  @resizing="resize" @dragging="resize"
      :w="100" :h="100"
      :parentLimitation="true"
      >
              <h3>test</h3>
              <p>{{ top }} х {{ left }} </p>
              <p>{{ width }} х {{ height }}</p>
      </vue-drag-resize>

@clicked="cc" :監聽點擊該元件後觸發事件
@deactivated="de"監聽點擊除該元件外的地方時觸發事件

      <vue-drag-resize :isActive="true"  @resizing="resize" @dragging="resize"
      :w="100" :h="100"
      @clicked="cc"
      @deactivated="de"
      >
              <h3>test</h3>
              <p>{{ top }} х {{ left }} </p>
              <p>{{ width }} х {{ height }}</p>
      </vue-drag-resize>

@resizestop="stops":監聽縮放結束時觸發function
@dragstop="stopd":監聽拖曳結束時觸發function

      <vue-drag-resize :isActive="true"  @resizing="resize" @dragging="resize"
      :w="100" :h="100"
      @resizestop="stops"
      @dragstop="stopd"
      >
              <h3>test</h3>
              <p>{{ top }} х {{ left }} </p>
              <p>{{ width }} х {{ height }}</p>
      </vue-drag-resize>