gausszhou / vue3-drag-resize-rotate Goto Github PK

是否可以支持组合元素，组合的元素一起拖动之类的

当使用这个库为移动端写框架布局时，假设一开始是为ipad做的位置和长宽，然后后来又有一个连接来自手机，那么此时加载框架时，内部的元素就可能超过页面边界。因为一开始渲染的时候并没有做边界碰撞的判断。这个可以优化下

作者这个是基于vue-draggable-resizable二次开发的么？ 他那个就有这个问题，是否有解决的打算呢

希望增加删除按钮，非常急需

我不知道哪里出了问题 还是3.0.2的使用方式发生了变化

在拖动和调整区域的大小时宽高会出现超长小数位

• 拖动边界调整宽高会出现下图这种情况
• 

感觉缓慢拖动的时候触发概率可能会高一些

复现

使用官网示例中的 事件(新增)-> 调整大小事件

GlobalVue.use is not a function

Currently, the handle size is configured via style attributes and manual pixel value calculations:

That makes it very inconvenient to override it with CSS. For instance, I wanted the handle to increase slightly on hover, but that's not directly possible as you're not only hardcoding fixed width in a style but also use it to calculate fixed pixel offsets (see above).

I propose to get rid of handleInfo completely, and use CSS for handle size, and replace hardcoded values inside calc with translate for centering:

.handle {
  width: 8px;
  height: 8px;
  &-tl {
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
  }
  &-tr {
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
  }
  &-bl {
    bottom: 0;
    left: 0;
    transform: translate(-50%, 50%);
  }
  &-br {
    bottom: 0;
    right: 0;
    transform: translate(50%, 50%);
  }
  &-rot {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

This is what I actually ended up doing, passing :handle-info="{ size: 0, offset: 0, switch: true }" to get rid of the hardcoded offsets. My point is that's how the library should work in the first place.

就目前来说没有api的介绍，demo里上面的一些属性和方法也不知道是干啥的，只能靠慢慢试，大佬

调整旋转角度触发事件rotating和rotatestop 样例中，rotating 没有 发生变化。
旋转时组件上没有显示出 "你正在旋转"

https://gausszhou.github.io/vue3-drag-resize-rotate/#/events/events-rotating

我自己测试的时候 onRotating 有效
onRotateStop 没有被执行。

限制在父元素中 但是缩放到如图就不能继续往下放大了 drag可以但是resize继续放大就不行

canvas生成图片的时候，transform: translate(x, y) rotate(r);的x,y被重置到初始值，希望不要变

出现滚动条时,鼠标滚动到底部,元素不跟着同步,还在屏幕可视最大高度处

你好，我更新到3.0.2后，测试激活事件，目前在仅局部可拖动的情况下，点击整体均可激活，但是会发生激活两次的情况，下面是我具体的代码


单击一个

切换目标

我是在用这个组件实现一个可拖拽的WEB窗口，需要在激活的时候切换目标到最上层，我在该组件外层加了一个dialog，需要根据zIndex控制dialog的zIndex，做到不同窗口的前后切换，你看我该如何解决，另外我想知道这个组件有关于移动时动画优化的控制没，我发现在打开多个窗口时，移动时会不跟鼠标，有一定的延迟，这有办法解决吗

演示文档中示例代码的 props 和 emits 比较混乱，貌似还不是很全面

如父级高度默认600，改为800px后子元素仍然在高度600px里限制移动而不是800px

我在dragging事件中判断是否超出范围，限制拖动，但是赋值了之后还是没能限制，我设置的x，y不生效，元素照样跟着鼠标拖动

使用了旋转后，父级限制不正常

能否增加父窗体尺寸的钩子，我可以在父div变换大小时，返回它的尺寸

怎么让元素只能在边框进行拖拽，并修改鼠标样式

I am trying to set the z parameter to bring the element up front and it is not working. I check the html and it is set to auto

当设置仅窗口标题栏可以拖动时，就无法点击窗体激活组件，只能点击标题栏激活，如何设置？
个人感觉组件激活与否与拖拽应当分开，我是在做多窗口功能时发现的，需要点击B窗体的时候，A窗体自动触发失活事件，但仅能通过标题栏拖动窗体，拜托，看到赶紧回复

作者有时间优化下 在有宽高比例的时候，旋转之后进行缩放操作，位置会发生偏移的情况吗

ios网页上面，非激活状态无法点击里面的元素，点击后无法触发里面的click事件。

第二次点击的时候才会触发（因为第一次点击就active了）。

PC端正常

https://lark-assets-prod-aliyun.oss-cn-hangzhou.aliyuncs.com/yuque/0/2023/png/688863/1689772207796-resources/24310040/png/7c44c093-33a2-41e8-a5f1-c553fdaa8b6f.png?OSSAccessKeyId=LTAI4GGhPJmQ4HWCmhDAn4F5&Expires=1689774010&Signature=NEDPUSbOl16CKjJdHAEDfW9RmCI%3D
https://lark-assets-prod-aliyun.oss-cn-hangzhou.aliyuncs.com/yuque/0/2023/png/688863/1689772207796-resources/24310040/png/7c44c093-33a2-41e8-a5f1-c553fdaa8b6f.png?OSSAccessKeyId=LTAI4GGhPJmQ4HWCmhDAn4F5&Expires=1689774010&Signature=NEDPUSbOl16CKjJdHAEDfW9RmCI%3D

组件嵌套的时候，我想只激活最内层的组件，最外层的组件不激活，移动最内层组件的时候，最外层组件不动，目前好像实现不了。

环境：vue3
场景：多图片替换
复线：默认有个120120的图片，w，h 类用
切换图片的时候230400的图片 w适配了 但是h还是原有的h

1.目前的吸附功能，是组件对齐时吸附，是否有考虑父级容器边缘以及网格线吸附
https://gausszhou.github.io/vue3-drag-resize-rotate/#/advanced/advanced-position-adsorption

2.启用旋转属性的元素限制范围不是边缘，而是中心点
https://gausszhou.github.io/vue3-drag-resize-rotate/#/basic/basic-with-rotatable

拖拽的元素有一半是可以出去的， 拖到一半时就不能再往外拖动了

Currently, the library publishes styles in @gausszhou/vue3-drag-resize-rotate/lib/bundle.esm.css as .vue-drag-resize-rotate[data-v-3c286975] { ... }

This makes it inconvenient to override (amend) the styles in the project. One either have to copy the scope selector (which is error prone, as the scope ID is auto generated and will change on every package update), or trick CSS to narrow the selector with some sort of hack, for instance :root .vue-drag-resize-rotate { ... }

In my thinking, library solutions should not be using scoped (or module) styles. The library styles are supposed to have a well recognizable place in the global scope, so that user could easily override them without additional hacks.

Hello Sir,

first of all, I want to say that this is a very good project and like the Vue component. I would like, to make the library more accessible to the general public, by translating the documentation into English. One possibility is to add a button that switches between the languages.

Also, I noticed that there are currently no types for Typescript.

I would like to contribute by providing translations for English and adding the types. I just need an okay from the maintainer, so that the changes will be applied after consultation and review.