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,插 ...
随机推荐
- hexo next主题深度优化(三),引入require.js,适配pjax。
文章目录 require.js的好处, hexo next中加入require.js 新建一个main.js作为所有js的入口 pjax的require.js实现 关于require js适配过程中报 ...
- ParameterizedThreadStart task
using System;using System.Diagnostics;using System.Threading;using System.Threading.Tasks; namespace ...
- 如何把本地文件上传github
1.$ git config --global user.name "xxx" 2.$ git config --global user.email xxx@qq.com 3.进入 ...
- python 17 异常
自 http://www.cnblogs.com/BeginMan/p/3171445.html 一.什么是错误,什么是异常,它们两者区别 这里解释如下:个人觉得很通俗易懂 错误是指在执行代码过程中发 ...
- 【csp】2018-3
第一题 跳一跳 题目: 题意:浅显.qwq 题解:2计数+1,到1就清空计数. 代码: #include<iostream> #include<cstdio> #include ...
- dubbo jar 配置文件
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- Apache Spark 2.2.0 中文文档 - Spark Streaming 编程指南
Spark Streaming 编程指南 概述 一个入门示例 基础概念 依赖 初始化 StreamingContext Discretized Streams (DStreams)(离散化流) Inp ...
- 【学术篇】SDOI2008 沙拉公主的困惑
传送门! 题目在这里... 题目大意? 难道不是说的很清楚了么OvO 求n!中与m!互质的数的个数.. 题目分析. 显然的数论... 所以就是化式子呗.. 一个很显然的性质就是如果\(gcd(a,b) ...
- leetcode-第10周双周赛-5099验证回文字符串③
题目描述: 方法:动态规划 class Solution: def isValidPalindrome(self, s: str, k: int) -> bool: def isKPalRec( ...
- 校园商铺-4店铺注册功能模块-5店铺注册之Service层的实现
1. 创建接口 ShopService.java package com.csj2018.o2o.service; import java.io.File; import com.csj2018.o2 ...