2. 程式人生 > >vue-draggable-resizable 拖拽縮放插件

vue-draggable-resizable 拖拽縮放插件

阿新 • • 發佈：2018-08-31
default () fault sel ali call ets bsp tor

安裝：

npm install --save vue-draggable-resizable

使用：

<template> <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;"> <vue-draggable-resizable :w="100" :h="100" v-on:dragging="onDrag" v-on:resizing="onResize" :parent="true"> <p>Hello! I‘m a flexible component. You can drag me around and you can resize me.<br>
X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p> </vue-draggable-resizable> </div> </template> <script> import VueDraggableResizable from ‘vue-draggable-resizable‘ export default { data: function () { return { width: 0, height: 0,
x: 0, y: 0 } }, components:{VueDraggableResizable }, 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 } } }
</script>

demo:

https://mauricius.github.io/vue-draggable-resizable/

參數：

1.active--是否激活

Type: Boolean
Required: false
Default: false

<vue-draggable-resizable :active="true">

2.draggable--是否可拖拽

Type: Boolean
Required: false
Default: true

<vue-draggable-resizable :draggable="false">

3.resizable--是否可縮放

Type: Boolean
Required: false
Default: true

<vue-draggable-resizable :resizable="false"> 4.w--初始寬度

Type: Number
Required: false
Default: 200

<vue-draggable-resizable :w="200"> 5.h--初始高度

Type: Number
Required: false
Default: 200

<vue-draggable-resizable :h="200"> 6.minw--最小寬度

Type: Number
Required: false
Default: 50

<vue-draggable-resizable :minw="50"> 7.minh--最小高度

Type: Number
Required: false
Default: 50

<vue-draggable-resizable :minh="50"> 8.x--初始位移x

Type: Number
Required: false
Default: 0

<vue-draggable-resizable :x="0"> 9.y-初始位移y

Type: Number
Required: false
Default: 0

<vue-draggable-resizable :y="0"> 10.z--顯示層級

Type: Number|String
Required: false
Default: auto

<vue-draggable-resizable :z="999"> 11.handles--控制區域

Type: Array
Required: false
Default: [‘tl‘, ‘tm‘, ‘tr‘, ‘mr‘, ‘br‘, ‘bm‘, ‘bl‘, ‘ml‘]

  • tl - Top left
  • tm - Top middle
  • tr - Top right
  • mr - Middle right
  • br - Bottom right
  • bm - Bottom middle
  • bl - Bottom left
  • ml - Middle left
<vue-draggable-resizable :handles="[‘tm‘,‘bm‘,‘ml‘,‘mr‘]"> 12：axis--設置拖拽方向（x,y,both）

Type: String
Required: false
Default: both

<vue-draggable-resizable axis="x"> 13:

grid--網格移動

Type: Array
Required: false
Default: [1,1]

<vue-draggable-resizable :grid="[1,1]"> 14：

parent--限制在父元素內移動

Type: Boolean
Required: false
Default: false

<vue-draggable-resizable :parent="true"> 15：dragHandle--定義拖拽元素

Type: String
Required: false

<vue-draggable-resizable drag-handle=".drag"> 16：

dragCancel--Defines a selector that should be used to prevent drag initialization.

Type: String
Required: false

<vue-draggable-resizable drag-cancel=".drag"> 17：

maximize--If set to true allows the component to fill its parent when double-clicked.

Type: Boolean
Required: false
Default: false

<vue-draggable-resizable :maximize="true">

事件：

1.activated

Required: false
Parameters: -

Called whenever the component gets clicked, in order to show handles.

<vue-draggable-resizable @activated="onActivated">

2.deactivated

Required: false
Parameters: -

Called whenever the user clicks anywhere outside the component, in order to deactivate it.

<vue-draggable-resizable @deactivated="onDeactivated">

3.resizing

Required: false
Parameters:

  • left the X position of the element
  • top the Y position of the element
  • width the width of the element
  • height the height of the element

Called whenever the component gets resized.

<vue-draggable-resizable @resizing="onResizing">

4.resizestop

Required: false
Parameters:

  • left the X position of the element
  • top the Y position of the element
  • width the width of the element
  • height the height of the element

Called whenever the component stops getting resized.

<vue-draggable-resizable @resizestop="onResizstop">

5.dragging

Required: false
Parameters:

  • left the X position of the element
  • top the Y position of the element

Called whenever the component gets dragged.

<vue-draggable-resizable @dragging="onDragging">

6.dragstop

Required: false
Parameters:

  • left the X position of the element
  • top the Y position of the element

Called whenever the component stops getting dragged.

<vue-draggable-resizable @dragstop="onDragstop">

引用：https://www.npmjs.com/package/vue-draggable-resizable#demo

vue-draggable-resizable 拖拽縮放插件

相關推薦

vue-draggable-resizable 拖拽縮放插件

default () fault sel ali call ets bsp tor 安裝： npm install --save vue-draggable-resizable 使用： <template> <div style="height: 5

基於vue的拖拽縮放插件--vue-drag-resize

one drag 初始化 div component cnpm ins return 縮放 搭建項目用的是vue-cli3.0,主要實現功能實現對圖片的拖拽和放大縮小 001、安裝依賴 cnpm install vue-drag-resize 002、配置m

拖拽 縮放

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>

vue draggable 火狐拖拽搜尋問題

最近在使用vuedraggable做導航時候，谷歌拖拽是沒問題的，但是在火狐測試時候，拖拽時候是可以成功，但是火狐還是打開了一個新的tab，並且搜尋了，一開始想著是阻止預設行為，但是在@end時間中阻止了預設行為，使用vue的.prevent.stop也是不行， 後來各種搜

div/dom元素拖拽縮放外掛，純js實現拖拽縮放，不依賴jQuery~

產品需求，需要用到對div（dom）進行拖拽縮放操作，看到有好多外掛，要麼依賴jQuery，要麼檔案太大。 封裝了一個外掛，不壓縮狀態下5KB。 html <!DOCTYPE html> <html lang="en"> <head> <

jQuery圖片縮放插件-smartZoom使用

下載 地址 height 9.png 鼠標滾輪 html span logs 縮小 e-smart-zoom-jquery.js插件，下載地址及示例：https://github.com/e-smartdev/smartJQueryZoom 插件描述：通過將鼠標懸停在圖片

PCB Genesis 鼠標滾輪縮放與TGZ拖放 插件實現

max 實現 editor 成功 tgz com gin tor 技術分享 一.背景： 做過CAM的人都用過Geneiss軟件，由於處理資料強大，目前奧寶公司出品的Genesis占領整個PCB行業，整個行業無人不知呀， 而此軟件有一個吐槽點Genes

vue 自定義拖拽指令

win input app ctrl off title nbsp ini sca <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t

基於Vue實現可以拖拽排序的樹形表格

專案需要一個可以拖拽排序的樹形表格，github上搜了一下，併為找到，大部分都不支援拖拽，所以自己實現了一個簡單的元件，已開源 原始碼在這裡，併發布到npm上，如果有類似需求可以試一下，chrome上沒有任何問題 效果圖如下： drag-tree-table 使用方式

基於Vue實現可以拖拽的樹形表格（原創）

　　因業務需求，需要一個樹形表格，並且支援拖拽排序，任意未知插入，github搜了下，真不到合適的，大部分樹形表格都沒有拖拽功能，所以決定自己實現一個。這裡分享一下實現過程，專案原始碼請看github，外掛已打包封裝好，釋出到npm上　 本博文會分為兩部分，第一部分為使用方式，第二部分為實現方式 安裝方式

Touch.js 手勢庫 拖動 縮放和 旋轉！！！

<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="

WPF無邊框視窗滑鼠拖動縮放大小

通常，我們會 通過AllowsTransparency=”True”、 WindowStyle=”None” 這兩個屬性將wpf視窗的邊框去掉，由於邊框沒了，我們就不能通過滑鼠指標懸停在某一邊上拖動改變視窗的大小，此時若要能調整視窗大小，官方倒也提供了個屬性：R

iOS手勢識別的詳細使用(拖動,縮放,旋轉,點選,手勢依賴,自定義手勢)

1、UIGestureRecognizer介紹手勢識別在iOS上非常重要，手勢操作移動裝置的重要特徵，極大的增加了移動裝置使用便捷性。iOS系統在3.2以後，為方便開發這使用一些常用的手勢，提供了UIGestureRecognizer類。手勢識別UIGestureRecogn

vue實現div拖拽互換位置

template模板 <transition-group tag="div" class="container"> <div class="item" v-for="(item,index) in items" :key="item.key" :style="{ba

解決VUE自定義拖拽指令時 onmouseup 與 click事件衝突

功能描述： 如圖，右側懸浮選單按鈕，只支援上下方向拖動，點選時展開或關閉選單。 BUG說明： 滑鼠上下方向拖拽，如果鬆開時滑鼠位於懸浮按鈕上會預設執行click事件，經驗證，click事件與mouse事件的執行順序為onmousedown =》onmouseup =》on

微信小程式仿照微信拖動縮放圖片和擷取頭像

效果圖 整體思路： 實現圖片的縮放和拖動； 在圖片上方蓋上中間鏤空的半透明遮罩； 根據擷取方框區域的圖片。截圖時，在方框區域將擷取的圖片繪製出來，然後使用wx.canvasToTempFilePath擷取圖片。 實現過程和遇到的問題：

VUE——自動定位+拖拽選址+搜尋選址

地圖載入完成後，進行自動定位到裝置當前所在位置（顯示當前周邊），拖拽地圖進行選擇地址，點選搜尋按鈕，搜尋框內輸入時會提示相關點，通過搜尋結果進行搜尋選擇地址元件部分：<template> <div> <button @click="add

vue實現圖片按比例縮放問題

getImg(src){ var img_url =src var img = new Image() img.src=img_url this.pictureHeight.height = Math.ceil(img.height/img.width *

Android拖動，縮放，自定義內容，控制元件製作（可拖動縮放RelativeLayout定製）

先上效果圖： 一.     製作此控制元件的起源 專案需要一個可以拖動的控制元件，在網上可以找到很多例子，有圖片拖動控制元件，有textview拖動控制元件。但是專案中需要控制元件同時可以動態通過手指調整尺寸，並且控制元件的內容不固定，需要自定義內容，即可以新增任意內容

vue模塊拖拽實現示例代碼

off lan 現在 簡單 comm etl nbsp xhtml www 正巧在之前面試中遇到問實現拖拽效果 當時面試的時候簡單回答了實現的方式與邏輯。 現在閑來無事，把這個東西實現了一下。 原理很簡單，寫的很方便。 數據驅動，建立一個數組，數組初始長度為1 拖