gorkys / vue-draggable-resizable-gorkys

Vue 用于可调整大小和可拖动元素的组件并支持冲突检测、元素吸附、元素对齐、辅助线

我是Gorkys

• QQ：44775464
• Blog：https://www.posthub.top

vue-draggable-resizable-gorkys's Issues

关于拖拽与缩放的回调

你好，能不能提供拖拽结束的回调，和缩放结束的回调

同时拖动多个组件时以一个整体为基准显示辅助线

实现同时拖动多个元素的原理是通过拖动一个元素，另外一个元素的通过计算跟随移动。所以位置可能会出现一些误差。如果有更好的解决方案可以留言。

成为一个整体的前提条件是需要将跟随元素都设为激活状态

注意： 拖动多个组件时，不支持吸附与元素对齐功能。

您好,除了改写没有提供父组件直接修改内部宽高及位置的方法吗?

您好,除了改写没有提供父组件直接修改内部宽高及位置的方法吗?修改prop传进去的参数无效.
将来有计划增加吗?感谢

有个比较特别的需求，只允许单向进行缩放

你好，我希望只能横向缩放大小，怎么禁用纵向的缩放手柄？

缺少计算属性

屏幕宽度动态变宽后，每一个拖动的元素w,h,x,y不会重新计算

源码中计算属性style存在不受props传入的minWidth、minHeight、maxWidth、maxHeight、x、y控制的现象

vue-draggable-resizable.vue文件的第1087～1094行，直接使用了data中的数据，在实际使用过程中如果组件自己响应了浏览器的resize事件重新计算了minWidth、minHeight、maxWidth、maxHeight、x、y等，通过props传入后，style计算出来的内容不受传入的值控制，导致组件显示异常。
style () {
return {
transform: translate(${this.left}px, ${this.top}px),
width: this.computedWidth,
height: this.computedHeight,
zIndex: this.zIndex,
...(this.dragging && this.disableUserSelect ? userSelectNone : userSelectAuto)
}
}

需要在return中进行校验控制，防止出现自己计算出来的数据和props传入的数据有出入。

希望可以加一个单位参数

当前的width height 支持 数字 或者 auto? 单位是px

在H5项目里 单位rem的无法进行正常的工作. 希望可以增加一个参数为单位 默认px

建议新增百分比宽高根据浏览器的宽高百分比缩放

建议新增百分比宽高根据浏览器的宽高百分比缩放

三个元素，一个高于其它两个时，剩余两个水平对齐时，竖线的长度会以最高的元素为基准

如何打印当前拖动元素的宽度，以及XY轴的参数呢？

如何打印当前拖动元素的宽度，以及XY轴的参数呢？

缩放时 中心点 选取会不同

当lock-aspect-ratio 为false时， 4个对角点进行缩放时，是会以 相反的对角点作为固定点进行缩放，而 lock-aspect-ratio为true时，固定点要么是左上，要么是右下了

onDeactivated 点击任意地方组件都取消，可否设置成只点击可拖动区域生效

@deactivated="onDeactivated" 这个方法太讨厌了，点击任意地方组件都取消，能不能设置成点击可拖动的区域点击才能取消？？？？？

求一个CDN的库文件

作者大大，求一个CDN形式的库文件啊。

冲突检测无效

这个正则把小数点去掉了

关于vue-draggable-resizable-gorkys的版本是否同步到npm上

请问最新版本已经更新到npm上了吗，npm install vue-draggable-resizable-gorkys 下载下来的东西内容不全

关于2.3.2版本元素对齐不显示辅助线的问题

之前用的2.2.0版本,吸附对齐是可以用的,昨天更新到2.3.2版本后看文档中写属性是snap和snap-tolerance,但是我设置了还是不出现辅助线,有什么需要注意的吗?

建议缩放、拖拽等事件增加一个防抖（debounce）的可选参数

建议缩放、拖拽等事件增加一个防抖（debounce）的可选参数

建议增加鼠标框选，框选后的可以同时移动

请教一下做辅助线的思路，不胜感激。

默认class建议改个名字

VueDraggableResizable.css中直接设置了.vdr、.handle的样式。
vdr还好，handle这个名字实在太容易冲突了，建议修改一下吧。

chrome浏览器78版本不支持拖动

您好,谷歌浏览器78版本,拖动会出现延迟

通过列表数据渲染多个可拖动box，给每一个增加一个删除按钮，点击删除出现错误

版本2.4.4
删除使用的最常规的 splice
删除前的样子

删除后

下方de的块自动上移了
通过修改代码消除当前问题

moveHorizontally(val) {
      const [deltaX, deltaY] = snapToGrid(this.grid, val, this.top, this.scale)
      console.log(deltaX, deltaY)
      const left = restrictToBounds(deltaX, this.bounds.minLeft, this.bounds.maxLeft)
      this.left = val  // 插件中原来取得是left  改成val就不再有问题了
      this.right = this.parentWidth - this.width - left
    },
    moveVertically(val) {
      const [deltaX, deltaY] = snapToGrid(this.grid, this.left, val, this.scale)
      console.log(deltaX, deltaY)
      const top = restrictToBounds(deltaY, this.bounds.minTop, this.bounds.maxTop)
      this.top = val   // 插件中原来取得是top  改成val就不再有问题了
      this.bottom = this.parentHeight - this.height - top
    },

忘楼主帮忙解答一下，原来为什么取计算出来的top和left，改成取val就不再有当前问题了

拖拽组件可以通过脚本生成吗

目前是通过数据数组push的方式生成一个拖拽节点，是否可以增加一个类似VueDraggableResizable.add(需拖拽的节点).

有没有配套的面板可用的？

有没有配套的面板可用的？
面板里面可以显示所有属性，手动调整的

启动项目报 找不到core-js的错

我 install core-js但是还是报not found: Error: Can't resolve 'core-js/modules/es6.array.filter'

多个活动组件切换的过程中组件的data没有变化，但是位置发生的偏移

我有多个屏幕进行切换，里面包含活动组件，当我在右边切换屏幕的时候，（所有屏幕在一个data里）组件的尺寸位置信息没有变化，但是在页面上发生了偏移，和所包含的数据不一致，请问一下这是什么原因，切换过程中数据是不变的

safari浏览器点击松开后，元素会跟随鼠标移动，怎么解决

您好请教一下有遇到图中出现的问题吗

vue.runtime.esm.js?0261:619 [Vue warn]: Error in mounted hook: "TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'."

found in

--->

TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
at VueComponent.getParentSize (VueDraggableResizable.umd.min.js?52a7:1)
at VueComponent.mounted (VueDraggableResizable.umd.min.js?52a7:1)
at invokeWithErrorHandling (vue.runtime.esm.js?0261:1854)
at callHook (vue.runtime.esm.js?0261:4219)
at Object.insert (vue.runtime.esm.js?0261:3139)
at invokeInsertHook (vue.runtime.esm.js?0261:6346)
at VueComponent.patch [as patch] (vue.runtime.esm.js?0261:6565)
at VueComponent.Vue._update (vue.runtime.esm.js?0261:3948)
at VueComponent.updateComponent (vue.runtime.esm.js?0261:4066)
at Watcher.get (vue.runtime.esm.js?0261:4479)
您好，请问一下出现这个问题是什么原因

请教下是否支持元素组合功能，组合内的元素也支持拖拽、缩放

您好！请教一下，咱们这个插件是否支持元素进行组合，组合后整体可以拖拽，内部子元素也可以拖拽和缩放

tsx下，resizestop、resizestop、onDragStart等事件无法触发

用了给的例子拖动的时候辅助线没出现

元素对齐辅助线添加key会报错

这样的key会重复

parent allowed .class identifier, now its boolean only.

Love the additional features you have added :)

Previously, I could use parent to identify a class to restrict the draggable to. Now, it only allows boolean. Any plans on restoring the previous capability to also allow css class?

活动组件与其它多个组件同在水平对齐时，仅出现dom相近两个组件的辅助线

由@luohuan930821 提供issues

请问我在组件内部添加了内容元素，在元素上添加了点击事件， 触发点击事件的时候总是触发组件的dragstop事件，如何避免冒泡或默认事件呢， stop, .pevent .native 写在子组件的事件上都不管用

<vdr
          v-for="(item2, index) in fastMenuList"
          :key="index"
          :w="80"
          :h="80"
          :min-width="80"
          :min-height="80"
          :y="Number(item2.position.split(',')[1])"
          :x="Number(item2.position.split(',')[0])"
          :z="index + 1041"
          :outline='false'
          :resizable="false"
          :snap='true'
          :isConflictCheck='true'
          :snap-tolerance="20"
          class-name="vdr"
          class-name-dragging="draggingClass"
          parent=".nav-conts"
          :preventActiveBehavior='true'
          :maximize="true"
          @dragstop="(left,top)=>onDragStop(item2.id, left, top)"
        >
          <div
            class='menu-item'
            :index="item2.menuId + ''"
            v-on:dblclick.prevent="gotoRouteHandle($event,item2)"
            >
            <icon-svg :name="item2.icon || ''" class="site-sidebar__menu-icon"></icon-svg>
            <span>{{item2.name}}</span>
          </div>
        </vdr>

parent 为true 是否可以只设置parentW或者parentH吗

parent 为true 是否可以只设置parentW或者parentH吗？比如只限制水平方向不能拖出父组件，数值方向可以拖出父组件，只能向下拖组件

大大，后期会支持旋转吗？急需

辅助线只在drag元素的时候出现，resize的时候不出现

能否在resize的时候也有辅助线

长度和宽度是否支持毫米

长度和宽度是否支持毫米，目前好像是像素

关于现拖拽元素中对元素进行拖拽的问题

如图展示，只要拖拽元素中的子元素，就会出现错位的问题，如果修改样式 position: absolute，会连着把父类元素一起拖动（正常状态应该是父类元素不会拖动，之后改动子元素的位置），请问有什么思路可以解决这个问题？谢谢！

关于父元素的大小发生变化，组件移动区域未改变的问题

问题参考原作者的issues，很多人问，并且一直纠结于提问者给出的方案，其实原作者已在下面给出更好的解决方案。
主动触发window的resize事件就可以解决。
在业务中动态调整父元素的大小后，使用：

this.$nextTick(() => {
     window.dispatchEvent(new Event('resize'))
})

即可...

冲突检测后resizestop与dragstop返回参数问题

当组件与组件进行冲突检测时，组件移动结束(dragstop)并判定冲突回到起始位置后，resizestop与dragstop返回的参数值应当是起始位置。

而目前返回的参数值是移动结束时的位置,并非组件实际所在的位置

关于使用transform: scale()属性导致html2canvas截图缺失的解决办法

按理说关于html2canvas的问题不应该写在这里，但是呢，目前此组件提供了对scale的修复功能。

我自己在项目中使用此组件的时候有场景遇到了此问题，就在这里记录一下。

<div  id="editArea" :style="templateStyle" class="editArea">
            <vdr
              v-for="(item,index) in elements"
              :key="item.id"
              :parent="true"
              :x="item.x"
              :y="item.y"
              :w="item.width"
              :h="item.height"
              :z="item.zIndex"
            ></vdr>
</div>
/*--------------*/
  computed: {
    templateStyle: function() {
      return {
        width: `${this.templateWidth}px`,
        height: `${this.templateHeight}px`,
        transform: `scale(${this.proportion})`
      }
    }
/*--------------*/
 .editArea{
    background-color: white;
    flex-shrink: 0;
  }

最开始的代码大致如上(缩写了很多属性)，在页面上显示正常，但是就是截图的时候，left与top会缺失一部分。当时使用了html2canvas的x,y属性进行偏移矫正，也是没办法完全恢复。

因为以前用过html2canvas，这次除了增加了transform:scale()其它都基本一样。所以把出现问题的重点放在它的身上。百度完又googel，google完又在github里翻issuse。各种五花八门的答案都有，不过百度上的基本是copy来copy去。

最终是调出devTools，把transform注释掉后发现里面的内容超出了#editArea的有效范围。
恍然大悟。

 .editArea{
    background-color: white;
    flex-shrink: 0;
    position: relative;
  }

加上relative后完全正常。本来布局上就出现了问题，只是缩放后问题就此被遮盖住了。

这个插件和vue-draggable 插件嵌套使用的时候多拽两下，会是vue-draggable 失效

IE compliant

when you run server in IE， you will find ['object not support forEach'].
While you're traversing nodeLlist, the forEach method won't work in IE, you can replace it with [for of]

关于辅助线精确性问题建议方案

问题一

关于辅助线不在控制点中间的问题2.4.0版本已修复

是因为基础导入的控制点样式不在正中位置导致的，只要将
handle-tm,handle-ml,handle-mr,handle-bm四个中心控制点的样式进行覆盖。
例：

.handle-tm {
  top: -5px;
  left: calc(50% - 4px);
  /*margin-left: -5px;*/
  cursor: n-resize;
}

问题二

关于未对齐时却出现辅助线的情况

因为元素大小的差值与snapTolerance所设值相近时导致的误差判断。
为了保证精确性，建议吸附功能与辅助线功能二选一。
snapTolerance值为1时，不会出现图中所见问题，所以当需求上snapTolerance值大于1时可选择关闭辅助线功能。

另，如果有相关的修复方案可直接联系我或提交PR。

是否考虑加入旋转功能

请问近期是否有考虑加入旋转功能的计划
参考https://github.com/zuimeiaj/yoyoo-ddr

冲突检测，组件往左移动失效，组件左右拉伸和向下拉伸失效

代码如下，代码来源链接：https://tingtas.com/vue-draggable-resizable-gorkys/?path=/story/%E9%AB%98%E7%BA%A7--%E5%85%83%E7%B4%A0%E5%AF%B9%E9%BD%90%E4%B8%8E%E8%BE%85%E5%8A%A9%E7%BA%BF

<template>
  <div id="app">
    <div style="height: 800px; width: 1200px; border: 1px solid red; position: relative;margin: 0 auto">
      <vdr
        :w="200"
        :h="200"
        :parent="true"
        :debug="false"
        :min-width="200"
        :min-height="200"
        :is-conflict-check="true"
        :snap="true"
        :snap-tolerance="10"
        class="test1"
        @refLineParams="getRefLineParams"
      />
      <vdr
        :w="200"
        :h="200"
        :parent="true"
        :x="210"
        :debug="false"
        :min-width="200"
        :min-height="200"
        :is-conflict-check="true"
        :snap="true"
        :snap-tolerance="10"
        class="test2"
        @refLineParams="getRefLineParams"
      />
      <vdr
        :w="200"
        :h="200"
        :parent="true"
        :x="420"
        :debug="false"
        :min-width="200"
        :min-height="200"
        :is-conflict-check="true"
        :snap="true"
        :snap-tolerance="10"
        class="test3"
        @refLineParams="getRefLineParams"
      />
      <!--辅助线-->
      <span
        v-for="item in vLine"
        v-show="item.display"
        class="ref-line v-line"
        :style="{ left: item.position, top: item.origin, height: item.lineLength}"
      />
      <span
        v-for="item in hLine"
        v-show="item.display"
        class="ref-line h-line"
        :style="{ top: item.position, left: item.origin, width: item.lineLength}"
      />
      <!--辅助线END-->
    </div>
  </div>
</template>

<script>

export default {
  name: 'DemoDrag',

  data() {
    return {
      vLine: [],
      hLine: []
    }
  },
  methods: {
    // 辅助线回调事件
    getRefLineParams(params) {
      const { vLine, hLine } = params
      this.vLine = vLine
      this.hLine = hLine
    }
  }
}
</script>

<style>
  .test1 {
    background-color: rgb(239, 154, 154);
  }
  .test2{
    background-color: rgb(129, 212, 250);
  }
  .test3{
    background-color: rgb(174, 213, 129);
  }
</style>

点击组件，组件会刷新

你好，我的组件里面是一个echarts饼图。当我点击组件的时候，饼图会重绘，请问怎样可以阻止饼图重绘

请教一下如何进行从外界拖拽生成组件。

类似鼠标在输入框文本处按下，自动生成组件并可以拖拽。 我试过按下时进行数组push，组件生成但是没有被默认选中无法进行拖拽。使用js主动触发mousedown发现会产生极大偏移。