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

2024-09-30 16:06:06

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

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

新增特征

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

功能预览

项目地址

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 实现可拖拽缩放的组件功能 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

Vue.Draggable实现拖拽效果

快速实现Vue.Draggable的拖拽效果,供大家参考,具体内容如下 1.下载包:npm install vuedraggable 配置:package.json "dependencies": { "element-ui": "^1.3.4", "less": "^2.7.2", "less-loader": "^4.0.4", "vue":
vue.draggable实现表格拖拽排序效果

本文实例为大家分享了vue.draggable实现表格拖拽排序效果展示的具体代码,供大家参考,具体内容如下主要使用vuedraggable和sortablejs两个组件. 1.安装组件 npm install vuedraggable npm install sortablejs 2.引入组件 import draggable from 'vuedraggable'; import Sortable from 'sortablejs'; export default { components:
vue拖拽排序插件vuedraggable使用方法详解

大家好,最近做的项目要用到拖拽排序,我现在的项目是vue项目,所以我就屁颠屁颠的去百度有木有这样功能的插件,我就知道一定会有,那就是vuedraggable,这是一款很棒的拖拽插件,下面我来说一下怎么引入首先在vue项目中,用npm包下载下来 npm install vuedraggable -S 下载下来后,引入插件,在你的vue文件的script标签里面这样引入 import draggable from 'vuedraggable' 别忘了下面要注册组件 components: { dr
vuedraggable+element ui实现页面控件拖拽排序效果

项目要实现一些控件的拖拽排序.从而找到了这款vuedraggable控件,供大家参考,具体内容如下如上图要实现这些控件的拖拽排序这是拖拽后由于公司网络的原因,项目没有使用npm,都是使用的引入的js <script type="text/javascript" src="lib/sortable/Sortable.min.js"></script> <script type="text/javascript"
vue iview多张图片大图预览、缩放翻转

本文实例为大家分享了vue iview多张图片大图预览,可缩放翻转,供大家参考,具体内容如下先看效果: 完整项目代码地址具体代码如下: <style lang="less"> @import "../advanced-router.less"; </style> <template> <div class="balance-accounts"> <Row class-name="
vue draggable resizable 实现可拖拽缩放的组件功能

虽然之前适配过旧版组件,但是因为2.0版本原作者对代码进行了重构,原来修改的代码照搬是不可能的了. 所以也就一直没有将冲突检测以及吸附对齐功能适配到2.0版本,最近正好有时间就适配一下. 新增特征冲突检测吸附对齐默认样式优化功能预览项目地址 github.com/gorkys/vue-- 如果喜欢该项目,欢迎 Star 新增Props isConflictCheck Type: Boolean Required: false Default: false 定义组件是否开启冲突检
微信小程序canvas拖拽、截图组件功能

先看下微信小程序canvas拖拽功能组件地址 github.com/jasondu/wx-- readme近期补上实现效果如何实现使用canvas 使用movable-view标签由于movable-view无法实现旋转,所以选择使用canvas 需要解决的问题如何将多个元素渲染到canvas上如何知道手指在元素上.如果多个元素重叠如何知道哪个元素在最上层如何实现拖拽元素如何缩放.旋转.删除元素看起来挺简单的嘛,就把上面这几个问题解决了,就可以实现功能了:接下来我们一一解决.
Vue利用draggable实现多选拖拽效果

目录前言实现思路 Demo全部代码 Demo实现效果前言最近产品提出一个排序需求,希望能进行拖拽排序,我一想,vue2插件这么多,sortable.js.draggable分分钟实现了,但是还有一个需求希望能够实现多选拖拽,这个就有点麻烦,查询了许多资料,暂时没有发现能够多选的拖拽组件,如果自己写一个,既耗费时间,实现效果上必然没有draggable这种成熟轮子效果好,于是决定基于draggable做改进. 实现思路我们知道draggable插件只要设置相同的group名字就能实现分组
基于Vue实现平滑过渡的拖拽排序功能

最近重读Vue官方文档,在列表的排序过渡这一小节,文档提到,<transition-group> 组件有一个特殊的地方,不仅可以实现进入和离开动画,还可以改变定位,官网示例如下: 例子中实现的效果看起来还是非常不错的,这个效果使我想起来另外一个使用场景,之前我在实现一个列表展示需求的时候,PM想让这个列表具有拖动排序的功能,方便他操作(事实上我最后并没有给他做哈哈),拖动的动画跟这个很像,网上搜索一下,类似插件应该很多,那如果我们自己来实现一个,问题在哪里呢? 首先要拖拽元素,记录元素拖拽
vue draggable resizable gorkys与v-chart使用与总结

实现效果: 实现图表的二次封装以及表格的自由拖动,缩放功能先贴出两个组件的地址: vue-draggable-resizable-gorkys v-chart 图标的二次封装这里我们先做一个简单的封装比如标题+图表的形式:chart_with_upwards_trend: <div class="chartcontainer"> <div>{{diyposition.title}}</div> <ve-line :data="c
vue elementui tree 任意级别拖拽功能代码

我的是根据父级id做的一些判断 <el-tree draggable :allow-drop="allowDrop" @node-drop="sort" accordion style="font-size:14px;width:250px;" ref="tree" :data="catalogList" :props="defaultProps" :expand-on-click
vue 实现拖拽动态生成组件的需求

产品需求开完产品需求会议,遇到了一个需求,首先页面分成两栏布局,左侧展示数据组件,支持拖拽排序,点击按钮清除组件.右侧支持将组件的缩略图拖拽至左侧生成一个新的组件. 思路对于动态生成组件来说每一次都要是生成全新的一个组件,那么就可以把组件放进函数当中 return.在JSX中调用函数,每次调用函数都会返回一个全新的组件.这对React来说非常简单,但是对于Vue来说,直接将组件返回是不可能的.尽管这个 return 写法不适合Vue,但是我们不可否认,思路是非常正确的,所以我们应该考虑一个
vue实现页面div盒子拖拽排序功能

vue 实现页面div盒子拖拽排序功能前言:目前市面上有很多实现拖拽排序功能的插件和方法,本节不过多累述,只讲一种:css3的transition-group方法效果图: 1. DOM中使用: <transition-group class="container" name="sort"> <div class="app-item" v-for="app in customApps" :key="
js实现鼠标拖拽缩放div实例代码

封装为了jq插件,如下 drag.js ;(function ($) { $.fn.dragDiv = function (options) { var def = { maxW:600,// 可伸缩的最大宽度 minW:50// 可伸缩的最小宽度 };// 参数默认值 var opts = $.extend(def,options);// 扩展参数,使用默认值或传参 //设置最大/最小宽度 var max_width = opts.maxW, min_width = opts.minW; //
Vue-drag-resize 拖拽缩放插件的使用(简单示例)

字幕 <div id="lBox" style="background-color: #D7E9F5;" :style="{'height': parentHeight + 'px', 'width': parentWidth + 'px'}"> <drag-resize v-for="(rect,index) in texts" style="overflow: hidden;" :w=

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

相关推荐

随机推荐