安装:

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. SPI 通信

    Frm: http://www.wzaobao.com/p/l5079K.html http://blog.csdn.net/xqmoo8/article/details/8043474 http:/ ...

  2. jwt、oauth2和oidc等认证授权技术的理解

    前言 jwt.oauth2.oidc等,都是和认证授权相关的规范或者解决方案,因此要理解他们,就需要从业务场景的适用性一步步的分析和认识. 一.认证授权业务场景理解 就个人目前的理解来看,一个好的软件 ...

  3. POJ 3237 /// 树链剖分 线段树区间修改(*-1)

    题目大意: 给定树的N个结点 编号为1到N 给定N-1条边的边权. 三种操作: CHANGE k w:将第 k 条边的权值改成 w. NEGATE x y:将x到y的路径上所有边的权值乘 -1. QU ...

  4. eclipse新建maven项目和聚合项目

    1.new maven project :  next 2.勾选 create a simple project  :  next 3.Group Id:项目的包路径 如com.jiayou.zjl, ...

  5. java面试官如何面试别人

                                                                                      java面试官如何面试别人(一) j ...

  6. npm -v 报错:cannot find module 'core-util-is'

    今天想打开之前的项目运行看看,结果报错:cannot find module 'core-util-is',以为只是缺少模块core-util-is,然后npm install --save core ...

  7. JS按比例缩放图片

    1.JS代码 <script type="text/javascript" language="javascript"> var flag = fa ...

  8. list集合排序2

    java根据List内对象的属性排序 原创 2016年12月07日 00:20:01 标签: java / 对象 / sort / compare 2625 方法一:实现Comparator接口,并重 ...

  9. JQuery ajax提交表单及表单验证

    JQuery ajax提交表单及表单验证 博客分类: jsp/html/javascript/ajax/development Kit 开源项目   注:经过验证,formValidator只适合一个 ...

  10. 关于FR4板一些重复的数据

    介电常数:4.2-4.7 信号传输速度:表层 140~170 ps/inch, 内层 180 ps/inch