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 相关文章推荐
js一组验证函数
Dec 20 Javascript
JavaScript CSS修改学习第三章 修改样式表
Feb 19 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
jQuery DOM插入节点操作指南
Mar 03 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 Javascript
js校验开始时间和结束时间
May 26 Javascript
Postman内建变量常用方法实例解析
Jul 28 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
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
浅谈PHP的反射API
2017/02/26 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
javascript数组排序汇总
2015/07/07 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
Vue表单实例代码
2016/09/05 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
某公司部分笔试题
2013/11/05 面试题
大学生社会实践自我鉴定
2014/03/24 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
部门2015年度工作总结
2015/04/29 职场文书
投标售后服务承诺书
2015/04/29 职场文书
毕业证明模板
2015/06/19 职场文书
给校长的建议书范文
2015/09/14 职场文书
MySQL中in和exists区别详解
2021/06/03 MySQL
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技