特徵

• 沒有依賴

• 使用可拖動，可調整大小或兩者兼備
• 定義用於調整大小的控制代碼
• 限制大小和移動到父元素或自定義選擇器
• 將元素捕捉到自定義網格
• 將拖動限制為垂直或水平軸
• 保持縱橫比
• 啟用觸控功能
• 使用自己的樣式
• 為控制代碼提供自己的樣式

安裝和基本用法

npm install --save vue-draggable-resizable

全域性註冊元件main.js中寫入：

import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'

// 可選擇匯入預設樣式
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

Vue.component('vue-draggable-resizable', VueDraggableResizable)

區域性註冊：在使用的元件裡引用

import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

常用屬性總結

:w 預設寬度
:h 預設高度
:x="50" 預設水平座標 注意相對元素是誰
:y="50" 預設垂直最表 注意相對元素是誰
:min-width="50" 最小寬度
:min-height="50" 最小高度
:parent="true" 限制不能拖出父元素
parent=".p-event" 限制不能拖出class為p-event的元素
:grid 水平和垂直移動 每次分別能夠走多少畫素
class-name 自定義元件class 下面定義一個dragging1

常用事件總結

事件簡述 文件（可點選直接進入）中ctrl+f 搜尋 “事件” 檢視詳細事件引數 

本demo舉例的不一一闡述
@dragging="onDrag"  每當拖動元件時呼叫。
@resizing="onResize" 每當元件調整大小時呼叫。

本demo沒用到的 可能會用到的
@dragstop="onDragstop" 每當元件停止拖動時呼叫。
@resizestop="onResizstop" 每當元件停止調整大小時呼叫
@deactivated="onDeactivated" 每當使用者單擊元件外的任何位置時呼叫
@activated="onActivated" 單擊元件時呼叫，以顯示控制代碼。備註：控制代碼就是點選元件後上下左右的可以拉伸的方塊點

舉例

vue模板程式碼

  <div class="helloword">
    <div class="text-event">
      <vue-draggable-resizable
        :w="150"
        :h="150"
        :x="50"
        :y="50"
        :min-width="50"
        :min-height="50"
        :parent="true"
        :grid="[10,10]"
        class-name="dragging1"
        @dragging="onDrag"
        @resizing="onResize"
      >
        <p>
          你好！ 我是一個靈活的元件。 你可以拖我四處，你可以調整我的大小。
          <br />
          X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}
        </p>
      </vue-draggable-resizable>
    </div>

    <!-- 相對於class等於什麼的標記拖拽 注意指定 parent -->
    <div class="p-event">
      <vue-draggable-resizable 
      parent=".p-event"
      >
        <p>You can drag me around and resize me as you wish.</p>
      </vue-draggable-resizable>
    </div>
  </div>

vue script程式碼

export default {
  name: "HelloWorld",
  data: function() {
    return {
      width: 0,
      height: 0,
      x: 0,
      y: 0
    };
  },
  methods: {
    onResize: function(x, y, width, height) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
    },
    onDrag: function(x, y) {
      this.x = x;
      this.y = y;
    }
  }
};

vue 層疊樣式程式碼

.helloword {
  overflow: hidden;
}
.text-event {
  float: left;
  height: 500px;
  width: 500px;
  border: 1px solid red;
  position: relative;

}
.p-event {
  float: left;
  height: 300px;
  width: 300px;
  border: 1px solid blue;
  position: relative;
  margin-left: 20px;
}

.dragging1 {
  border: 1px solid #000;
  color: #000;
}

執行效果：都限制在自己設定的元素中不得超出

• 網格設定 網格寬高為10畫素，通過： :grid屬性控制每次拖拽移動多少畫素 :grid:[10, 10]
• 單擊元件可顯示 控制代碼 用來調整寬度高度
• 拖拽移動元件可實時儲存 水平 垂直 寬度 高度 的資料

注意：拖拽後背景變顏色是因為gif錄製的原因