vue 可拖拽可縮放 vue-draggable-resizable 組件經常使用總結

特徵

沒有依賴

使用可拖動，可調整大小或二者兼備
定義用於調整大小的句柄
限制大小和移動到父元素或自定義選擇器
將元素捕捉到自定義網格
將拖動限制爲垂直或水平軸
保持縱橫比
啓用觸控功能
使用本身的樣式
爲句柄提供本身的樣式

安裝和基本用法

npm install --save vue-draggable-resizable

全局註冊組件main.js中寫入：css

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

// 可選擇導入默認樣式
import 'vue-draggable-resizable/dist/VueDraggableResizable.css' Vue.component('vue-draggable-resizable', VueDraggableResizable)

局部註冊：在使用的組件裏引用vue

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模板代碼git

<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代碼github

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 層疊樣式代碼npm

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

　　/* 網格設置 */

　　background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 10px 10px, linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 10px 10px;

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

運行效果：都限制在本身設置的元素中不得超出this

網格設置網格寬高爲10像素，經過： :grid屬性控制每次拖拽移動多少像素 :grid:[10, 10]
單擊組件可顯示句柄用來調整寬度高度
拖拽移動組件可實時保存水平垂直寬度高度的數據

注意：拖拽後背景變顏色是由於gif錄製的緣由spa