vue-draggable-resizable 拖拽缩放插件
安装:
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
3.resizable--是否可缩放
Type: Boolean
Required: false
Default: true
Type: Number
Required: false
Default: 200
Type: Number
Required: false
Default: 200
Type: Number
Required: false
Default: 50
Type: Number
Required: false
Default: 50
Type: Number
Required: false
Default: 0
Type: Number
Required: false
Default: 0
Type: Number|String
Required: false
Default: auto
Type: Array
Required: false
Default: ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']
tl
- Top lefttm
- Top middletr
- Top rightmr
- Middle rightbr
- Bottom rightbm
- Bottom middlebl
- Bottom leftml
- Middle left
Type: String
Required: false
Default: both
grid--网格移动
Type: Array
Required: false
Default: [1,1]
parent--限制在父元素内移动
Type: Boolean
Required: false
Default: false
Type: String
Required: false
dragCancel--Defines a selector that should be used to prevent drag initialization.
Type: String
Required: false
maximize--If set to true
allows the component to fill its parent when double-clicked.
Type: Boolean
Required: false
Default: false
事件:
1.activated
Required: false
Parameters: -
Called whenever the component gets clicked, in order to show handles.
2.deactivated
Required: false
Parameters: -
Called whenever the user clicks anywhere outside the component, in order to deactivate it.
3.resizing
Required: false
Parameters:
left
the X position of the elementtop
the Y position of the elementwidth
the width of the elementheight
the height of the element
Called whenever the component gets resized.
4.resizestop
Required: false
Parameters:
left
the X position of the elementtop
the Y position of the elementwidth
the width of the elementheight
the height of the element
Called whenever the component stops getting resized.
5.dragging
Required: false
Parameters:
left
the X position of the elementtop
the Y position of the element
Called whenever the component gets dragged.
6.dragstop
Required: false
Parameters:
left
the X position of the elementtop
the Y position of the element
Called whenever the component stops getting dragged.
引用:https://www.npmjs.com/package/vue-draggable-resizable#demo
vue-draggable-resizable 拖拽缩放插件的更多相关文章
- Vue.Draggable实现拖拽效果(采坑小记)
之前有写过Vue.Draggable实现拖拽效果(快速使用)(http://www.cnblogs.com/songdongdong/p/6928945.html)最近项目中要用到这个拖拽的效果,当产 ...
- div/dom元素拖拽缩放插件,纯js实现拖拽缩放,不依赖jQuery~
产品需求,需要用到对div(dom)进行拖拽缩放操作,看到有好多插件,要么依赖jQuery,要么文件太大. 封装了一个插件,不压缩状态下5KB. html <!DOCTYPE html> ...
- vue draggable 火狐拖拽搜索问题
最近在使用vuedraggable做导航时候,谷歌拖拽是没问题的,但是在火狐测试时候,拖拽时候是可以成功,但是火狐还是打开了一个新的tab,并且搜索了,一开始想着是阻止默认行为,但是在@end时间中阻 ...
- Vue.Draggable实现拖拽效果(快速使用)
1.下载包:npm install vuedraggable 配置:package.json "dependencies": { "element-ui": & ...
- div拖拽缩放jquery插件编写——带8个控制点
项目中需要对div进行拖拽缩放,需要有控制面板8个控制点的那种,原以为这么常见的效果应该能搜索到很多相关插件,然而可以完成拖拽的实繁,却找不到我想要的,还是自己动手丰衣足食吧 效果预览(只支持pc端) ...
- Vue富文本编辑器(图片拖拽缩放)
富文本编辑器(图片拖拽缩放) 需求: 根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽.缩放.改变图片大小.尝试多个第三方富文本编辑器,很 ...
- 11个好用的jQuery拖拽拖放插件
这次我们整理一些拖拽播放类型的jQuery插件,这些可能不是很常用,但偶尔会有网站设计项目用到,特别是后台相关的开发项目,这个拖放排序功能一般都会有,所以适合大家收藏起来,方便日后使用.接下来一起看盾 ...
- vue el-transfer新增拖拽排序功能---sortablejs插件
<template> <!-- target-order="unshift"必须设置,如果不设置的话后台穿的value值得顺序会被data重置 - --> ...
- 基于Vue实现可以拖拽的树形表格(原创)
因业务需求,需要一个树形表格,并且支持拖拽排序,任意未知插入,github搜了下,真不到合适的,大部分树形表格都没有拖拽功能,所以决定自己实现一个.这里分享一下实现过程,项目源代码请看github,插 ...
随机推荐
- SPI 通信
Frm: http://www.wzaobao.com/p/l5079K.html http://blog.csdn.net/xqmoo8/article/details/8043474 http:/ ...
- jwt、oauth2和oidc等认证授权技术的理解
前言 jwt.oauth2.oidc等,都是和认证授权相关的规范或者解决方案,因此要理解他们,就需要从业务场景的适用性一步步的分析和认识. 一.认证授权业务场景理解 就个人目前的理解来看,一个好的软件 ...
- POJ 3237 /// 树链剖分 线段树区间修改(*-1)
题目大意: 给定树的N个结点 编号为1到N 给定N-1条边的边权. 三种操作: CHANGE k w:将第 k 条边的权值改成 w. NEGATE x y:将x到y的路径上所有边的权值乘 -1. QU ...
- eclipse新建maven项目和聚合项目
1.new maven project : next 2.勾选 create a simple project : next 3.Group Id:项目的包路径 如com.jiayou.zjl, ...
- java面试官如何面试别人
java面试官如何面试别人(一) j ...
- npm -v 报错:cannot find module 'core-util-is'
今天想打开之前的项目运行看看,结果报错:cannot find module 'core-util-is',以为只是缺少模块core-util-is,然后npm install --save core ...
- JS按比例缩放图片
1.JS代码 <script type="text/javascript" language="javascript"> var flag = fa ...
- list集合排序2
java根据List内对象的属性排序 原创 2016年12月07日 00:20:01 标签: java / 对象 / sort / compare 2625 方法一:实现Comparator接口,并重 ...
- JQuery ajax提交表单及表单验证
JQuery ajax提交表单及表单验证 博客分类: jsp/html/javascript/ajax/development Kit 开源项目 注:经过验证,formValidator只适合一个 ...
- 关于FR4板一些重复的数据
介电常数:4.2-4.7 信号传输速度:表层 140~170 ps/inch, 内层 180 ps/inch