安装:

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 拖拽缩放插件的更多相关文章

  1. Vue.Draggable实现拖拽效果(采坑小记)

    之前有写过Vue.Draggable实现拖拽效果(快速使用)(http://www.cnblogs.com/songdongdong/p/6928945.html)最近项目中要用到这个拖拽的效果,当产 ...

  2. div/dom元素拖拽缩放插件,纯js实现拖拽缩放,不依赖jQuery~

    产品需求,需要用到对div(dom)进行拖拽缩放操作,看到有好多插件,要么依赖jQuery,要么文件太大. 封装了一个插件,不压缩状态下5KB. html <!DOCTYPE html> ...

  3. vue draggable 火狐拖拽搜索问题

    最近在使用vuedraggable做导航时候,谷歌拖拽是没问题的,但是在火狐测试时候,拖拽时候是可以成功,但是火狐还是打开了一个新的tab,并且搜索了,一开始想着是阻止默认行为,但是在@end时间中阻 ...

  4. Vue.Draggable实现拖拽效果(快速使用)

    1.下载包:npm install vuedraggable 配置:package.json "dependencies": { "element-ui": & ...

  5. div拖拽缩放jquery插件编写——带8个控制点

    项目中需要对div进行拖拽缩放,需要有控制面板8个控制点的那种,原以为这么常见的效果应该能搜索到很多相关插件,然而可以完成拖拽的实繁,却找不到我想要的,还是自己动手丰衣足食吧 效果预览(只支持pc端) ...

  6. Vue富文本编辑器(图片拖拽缩放)

    富文本编辑器(图片拖拽缩放) 需求: 根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽.缩放.改变图片大小.尝试多个第三方富文本编辑器,很 ...

  7. 11个好用的jQuery拖拽拖放插件

    这次我们整理一些拖拽播放类型的jQuery插件,这些可能不是很常用,但偶尔会有网站设计项目用到,特别是后台相关的开发项目,这个拖放排序功能一般都会有,所以适合大家收藏起来,方便日后使用.接下来一起看盾 ...

  8. vue el-transfer新增拖拽排序功能---sortablejs插件

    <template> <!-- target-order="unshift"必须设置,如果不设置的话后台穿的value值得顺序会被data重置 -  --> ...

  9. 基于Vue实现可以拖拽的树形表格(原创)

    因业务需求,需要一个树形表格,并且支持拖拽排序,任意未知插入,github搜了下,真不到合适的,大部分树形表格都没有拖拽功能,所以决定自己实现一个.这里分享一下实现过程,项目源代码请看github,插 ...

随机推荐

  1. hexo next主题深度优化(三),引入require.js,适配pjax。

    文章目录 require.js的好处, hexo next中加入require.js 新建一个main.js作为所有js的入口 pjax的require.js实现 关于require js适配过程中报 ...

  2. ParameterizedThreadStart task

    using System;using System.Diagnostics;using System.Threading;using System.Threading.Tasks; namespace ...

  3. 如何把本地文件上传github

    1.$ git config --global user.name "xxx" 2.$ git config --global user.email xxx@qq.com 3.进入 ...

  4. python 17 异常

    自 http://www.cnblogs.com/BeginMan/p/3171445.html 一.什么是错误,什么是异常,它们两者区别 这里解释如下:个人觉得很通俗易懂 错误是指在执行代码过程中发 ...

  5. 【csp】2018-3

    第一题 跳一跳 题目: 题意:浅显.qwq 题解:2计数+1,到1就清空计数. 代码: #include<iostream> #include<cstdio> #include ...

  6. dubbo jar 配置文件

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  7. Apache Spark 2.2.0 中文文档 - Spark Streaming 编程指南

    Spark Streaming 编程指南 概述 一个入门示例 基础概念 依赖 初始化 StreamingContext Discretized Streams (DStreams)(离散化流) Inp ...

  8. 【学术篇】SDOI2008 沙拉公主的困惑

    传送门! 题目在这里... 题目大意? 难道不是说的很清楚了么OvO 求n!中与m!互质的数的个数.. 题目分析. 显然的数论... 所以就是化式子呗.. 一个很显然的性质就是如果\(gcd(a,b) ...

  9. leetcode-第10周双周赛-5099验证回文字符串③

    题目描述: 方法:动态规划 class Solution: def isValidPalindrome(self, s: str, k: int) -> bool: def isKPalRec( ...

  10. 校园商铺-4店铺注册功能模块-5店铺注册之Service层的实现

    1. 创建接口 ShopService.java package com.csj2018.o2o.service; import java.io.File; import com.csj2018.o2 ...