vue draggable resizable 实现可拖拽缩放的组件功能


Posted in Javascript onJuly 15, 2019

虽然之前适配过旧版组件,但是因为2.0版本原作者对代码进行了重构,原来修改的代码照搬是不可能的了。

所以也就一直没有将 冲突检测 以及 吸附对齐 功能适配到2.0版本,最近正好有时间就适配一下。

新增特征

  • 冲突检测
  • 吸附对齐
  • 默认样式优化

功能预览

vue draggable resizable 实现可拖拽缩放的组件功能

项目地址

github.com/gorkys/vue-…

如果喜欢该项目,欢迎 Star

新增Props

isConflictCheck

Type: Boolean

Required: false

Default: false

定义组件是否开启冲突检测。

<vue-draggable-resizable :is-conflict-check="true">

snap

Type: Boolean

Required: false

Default: false

定义组件是否开启元素对齐。

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

snapTolerance

Type: Number

Required: false

Default: 5

当调用 snap 时,定义组件与元素之间的对齐距离,以像素(px)为单位。

<vue-draggable-resizable :snap="true" :snap-tolerance="20">

其它属性请参考 vue-draggable-resizable 官方文档

安装使用

$ npm install --save vue-draggable-resizable-gorkys

全局注册组件

//main.js
import Vue from 'vue'
import vdr from 'vue-draggable-resizable-gorkys'

// 导入默认样式
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
Vue.component('vdr', vdr)

局部注册组件

<template>
 <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
  <vdr :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>
  </vdr>
  <vdr
   :w="200"
   :h="200"
   :parent="true"
   :debug="false"
   :min-width="200"
   :min-height="200"
   :isConflictCheck="true"
   :snap="true"
   :snapTolerance="20"
  >
  </vdr>
 </div>
</template>

<script>
import vdr from 'vue-draggable-resizable-gorkys'
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
export default {
 components: {vdr},
 data: function () {
  return {
   width: 0,
   height: 0,
   x: 0,
   y: 0
  }
 },
 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>

总结

以上所述是小编给大家介绍的vue draggable resizable 实现可拖拽缩放的组件功能 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript 必知必会之closure
Sep 21 Javascript
jquery插件制作简单示例说明
Feb 03 Javascript
JavaScript之引用类型介绍
Aug 10 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 #Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 #Javascript
详解vuex的简单todolist例子
Jul 14 #Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 #Javascript
微信小程序解析富文本过程详解
Jul 13 #Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 #Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 13 #Javascript
You might like
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
前端必学之PHP语法基础
2016/01/01 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
2015/12/14 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
分享15个最受欢迎的Python开源框架
2014/07/13 Python
深入源码解析Python中的对象与类型
2015/12/11 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
Selenium定位元素操作示例
2018/08/10 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
YUV转为jpg图像的实现
2019/12/09 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
Python如何将函数值赋给变量
2020/04/28 Python
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
考博自荐信
2013/10/25 职场文书
宣传稿格式范文
2015/07/23 职场文书
合理化建议书范文
2015/09/14 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书