kirillmurashov/vue-drag-resize

Vue2 && Vue3 Component for resize and drag elements

vue-drag-resize's Issues

Invalid prop: custom validator check failed for prop "h"

What this means? I can not resolved this error message:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid prop: custom validator check failed for prop "h".

found in

---> at src/components/vue-drag-resize.vue

DragStop and ResizeStop reference to component that was manipulated?

I'm adding vue-drag-resize components dynamically (v-for). In order to persist the positioning, I need to know which element was just moved or resized. I can't see any data in the eventhandler parameter object which would help identify a specific component, the parameter only contains the coordinates and size.

This would do it...

rect() {
return {
id: this.$el.id,
left: Math.round(this.left),
top: Math.round(this.top),
width: Math.round(this.width),
height: Math.round(this.height)
};
}

[Feature request] Please pass MouseEvent to `clicked` handler

Just add ev as the second argument of $emit here

External component may needs handle some MouseEvent like right click and so on. Wrapping the vue-drag-resize component with a new div and handle MouseEvent on that div is also OK, but exporting the event may be a more efficient way.

how to update draglist props

The events only accept argument with position info,and how do i trans a item or index which from 'v-for' to resizestop event

组件宽高可以自动适配吗？

在没有设置组件的宽高时，组件可以自己适配宽高吗？
如：

<VueDragResize :isActive="true"  v-on:resizing="resize" v-on:dragging="resize">
            <h3>Hello World!</h3>
        </VueDragResize>

会根据组件里面的<h3>Hello World!</h3>来自己调整宽高，使得组件的宽高刚好是h3元素的宽高

How to revert drag event

After dragging an element using the vue-drag-resize component, I need to check the coordinates where the element was dragged to and if it's not a valid location, revert the coordinates back to where the drag was started.

Here's the sample code

Here I assign the original value when the element is initially clicked to start the move.

onActivated(index) {
  this.currentFieldIndex = index;
  this.currentField.left = this.fields[this.currentFieldIndex].left;
  this.currentField.top = this.fields[this.currentFieldIndex].top;
}

And then when they stop the drag outside of the boundaries, I try to reassign the original coordinates back into the field like this:

onDragStop(rect) {
  if (rect.left < 0 || rect.top < 0) {
    this.fields[this.currentFieldIndex].left = this.currentField.left;
    this.fields[this.currentFieldIndex].top = this.currentField.top;
  } else {
    this.fields[this.currentFieldIndex].left = rect.left;
    this.fields[this.currentFieldIndex].top = rect.top;
    this.currentField.x = rect.left;
    this.currentField.y = rect.top;
  }
}

Interestingly enough, if I just hard-code the reset coordinates like this (below) it works fine:

onDragStop(rect) {
  if (rect.left < 0 || rect.top < 0) {
    this.fields[this.currentFieldIndex].left = 0; //this.currentField.left;
    this.fields[this.currentFieldIndex].top = 0; //this.currentField.top;
  } else {
    this.fields[this.currentFieldIndex].left = rect.left;
    this.fields[this.currentFieldIndex].top = rect.top;
    this.currentField.x = rect.left;
    this.currentField.y = rect.top;
  }
}

请问什么条件下，才是激活的状态？

场景如下：
1.设置:isActive="true",然后点击其他地方，这个时候，并没有把isActive给设置为false，为了业务需求，那么，当我再次回到这边的时候，拖动却无法响应，一定要点击一次，然后才可以拖动

Dragstop event not triggered in touch mode?

I'm having trouble understanding how dragstop works.

In this example dragstop is being triggered immediately when the dragging stops (when the mouse button is released).

But when I use the mobile emulator in Chrome, so I can try out touch-events, the dragstop event only fires when I touch the screen outside the item, or when I touch the item again.

Is there a way to make this work in touch-mode too ?

Any way to disable the grey coloured div that appears on top of each element when clicked on?

:D

Impossible to define :root variables in vuejs

Hey, thanks for this package.

I wanted to change the sticks size and I did not succeed as your css is loaded before mine.

Do you know a way to do it ?

Uncaught TypeError

Sometimes, I get this error at console but there is no noticeable problem in terms of user experience at runtime:

Furthermore, No this error in version 1.2.3

Input field doesn't work inside vue-drag-resize

I can't focus and type anything inside input text. It makes sense if element is draggable but it doesn't work with isDraggable false. How to fix this?

Could you please add dragHandle \ dragCancel?

Hi.

Its seems that you are inspired by or just decided to give the second life to the component https://github.com/mauricius/vue-draggable-resizable as Mauricius does not update it anymore.

Could you please add dragHandle \ dragCancel , ie as stated here and shown here (the last case)

P.S. For others it would be usefull if you can add to the README (Features section) that your component supports (as far as I understand the code):

• mobile devices (touch events);
• emits for updates of x, y, w, h.

Thanks a lot!

[Feature Request] Please handle right mouse button

Right click the vue-drag-resize component, and left click somewhere, the component will flash to the left clicked position.

suggestion:

1. add a prop onlyPrimaryButton whose default value is false.
2. add code here to just return by using onlyPrimaryButton and ev.button.

if (this.onlyPrimaryButton && ev.button !== 0) return

Maybe there is a better way, but handle which button is firing the event make this component more robust.

It is possible to snap components to other?

Is any way to snap components to other draggable components or some div ( to parent ) ? Like jQueryUI
https://jqueryui.com/draggable/#snap-to

Thanks

Is it possible to set drag step?

It would be cool if it was not just to move the object, but also on some steps

OnContextMenu event does not work

Is there any way to implement v-on:contextmenu, @contextmenu event listener, this vue2 event listener does not work now?

parentLimitation="true" should set <vue-drag-resize> position to relative

Hey, I was playing around with your package.
Apperently if you set the parentLimitation to true and shift the parent element with an e.g margin, the vue-drag-resize components limitation is set to the width and height of the parent.
but the limiting border isnt moved with the parent element.

I tried to set the position to relative instead of absolute on the draggable element and had the desired behaviour :)

设置了minh与minw，可以起作用，但是会一直报警告

Invalid prop: custom validator check failed for prop "minh"
请问下，怎么去掉这个警告？

Example from the README does not work

Here is the code from the readme in a sandbox.
Move it a bit and you will see the problem. The same strange behavior I have in my project.

I use VueJS 2.5.16.

Any ideas?
Thanks.

Doesn't respect z-index

Withdrawn

DragCancel not working

I get this error when trying to use the dragCancel prop.

[Vue tip]: Prop "dragcancel" is passed to component <Anonymous>, but the declared prop name is "dragCancel". Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. You should probably use "drag-cancel" instead of "dragCancel".

I need this props to edit an input inside the drag component.

Touch Support

You mention that there is support for touch events -- does this mean I would need to implement touch drag support myself? When I navigate to the demo page and attempt to use my phone or tablet (both iOS devices), the elements get selected but won't move around. Also, the width and height inputs change to NaN instead of the normal pixel size as seen on desktop.

Is this intended for mobile use? I am looking for a library JUST like this but with mobile support. Thanks!

添加多个拖拽，支持互斥吗

"preventActiveBehavior" -> Probably mistake in the readme

In the example of preventActiveBehavior we see: <vue-drag-resize :isActive="true">
I guess it must be <vue-drag-resize :preventActiveBehavior="true">

set isDraggable to false, can't active the element

When I set isDraggable to false and isResizable to true, then click this element, it seems not response my action, can not active this element for resizing.

当我将 isDraggable 设置为 false 并且 isResizable 为 true 时，然后单击此元素，它似乎没有响应我的操作，无法激活这个元素来调整大小。

ES5 Build request

Hi @kirillmurashov,

I'm part of a company in which we have a big platform we offer to our clients that currently doesn't support ES6, even though we are planning to support it in the near future, we would like to incorporate this vue-drag-resize library to our project, that being said, is it possible for you guys to generate an ES5 build we can use? or if you could guide us on best approach to make use of the library without having ES6.

Thanks in advance,

if refresh , page will error when running time compile mode

use NUXT framework, when refresh page, this component is wrong, the compiler is not suport template attribute when running time compile mode

How to use as a subclass ?

Context

(Still learning Vue.js. Newbie question ahead. ☻ )

I have a custom Component. Currently, it does little besides load up some width and height dimensions, along with some text and IDs.

I want to make my custom Component draggable, so I’ve been trying to use vue-drag-resize as a base Component.

I’m having some trouble understanding how to do this in Vue.js. I have an extremely basic custom Component, and I just want it to subclass VueDragResize so I can make instances of my Component draggable.

Questions

• What is the difference between Vue.extend( … ) and Vue.component('name', { extends: «Another Component», … })?

• If I need to pass anything to VueDragResize, where do I do that?

  • Default values for props?
  • Returned values in data: function() {…}?
  • Using v-bind directives?

Most recent code not available through npm

Last recent version of vue-drag-resize is 1.3.2. But this version does not contain the snapToGrid feature which is documented in the docs. Could you release a new version with most up to date code?

Strange behavior in modal

I tried to use component in the bootstrap modal. The component behaved strangely. An axis show minus values when dragging.

...
I found out that is due to the visibility of the component.

:minw and :minh do not work

Demo

Contents within VueDragResize are not scaling

Is it possible to have the contents within the component scale as it's being resized?

        <VueDragResize :isActive="true" :w="200" :h="200">
            <h2>{{hours}}:{{minutes}} {{hourtime}}</h2>
        </VueDragResize>

Based on the docs "parentLimitation" by default is "false", but in reality is "true"

In order to drag element out of parent it is necessary to explicitly set ":parentLimitation="false", however according to the docs the default value already should be "false"

parentLimitation
Type: Boolean
Required: false
Default: false

Limits the scope of the component's change to its parent size.

https://github.com/kirillmurashov/vue-drag-resize/blob/master/src/components/vue-drag-resize.js#L19

How to execute click event?

there is image for the code

I want to execute the top click event 'mainClick' , but it always execute the dragging or resizing first , I don't like it . And the click event 'test1' and 'test2' no execute . How to solve it?

this is the click result , I just click

I don't want the '1' appear ,only need the '2' . In my project the '1' will cause serious problems

Bug in Nested Vue-Drag-Resize Components

I came across a bug that occurs if you have nested vue-drag-resize components.

What Happens

The child vue-drag-resize will not show it's resize handles.

Why

The bug is caused by the following CSS selected that is not specific enough for nesting:

.inactive .vdr-stick

This selector will be applied to the nested component. E.g. if you click the child component then it correctly gets the .active class applied and the parent gets the .inactive class applied. But, the selector above causes the sticks to not show as the parent has the .inactive class so the selector matches and the child will not have the sticks.

Work Around

In the mean time, I simply worked around it by being more specific in the CSS selector in my app:

.vdr { .widget.active { .vdr-stick { display: block; } } }

Nested children have the .widget class and the .active class is applied by vue-drag-resize so this works.

Can't set element's properties after it's been dragged/resized.

In my code example below, you can click on the "Move Fields" button which programmatically changes the element's properties. However, if I drag or resize the fields first, then I'm not able to programmatically change the element's properties anymore.

Code Example:
https://codesandbox.io/s/j42l57jq05

Support for 'vw' units instead of 'px'

Would it be possible to add support for 'vw' units for the top/left calculations instead of 'px'?

With pixel's the locations of the elements do not scale as the browser window changes, support for vw positioning would solve this issue.

some issues (一些问题)

use this code No effect. I think is that can drag at regular intervals.（使用以下代码没有任何效果，我的理解是可以按照固定的间隔拖拽）
:snapToGrid="true" :gridX="iw" :gridY="ih"
When we use V-for loop, we use: x y to locate the location. When we delete one, we will find that the location will change, but the value has not changed. Why?
（当我们用v-for循环使用的时候，使用：x y来定位位置，当我们删除一个的时候，会发现定位的位置会发生改变，但是值并没有改变，为什么？）
<VueDragResize v-for="(item,index) in detail" :isActive="true" :w="iw*item.width" :h="ih*item.height" :x="iw*item.left" :y="ih*item.top" :snapToGrid="true" :gridX="iw" :gridY="ih" :isResizable="false" parentLimitation :isDraggable="item.width!=12" v-on:dragstop="stopDrag" @clicked="clicked(item)"> <div class="itemLayout" :style="{width:iw*item.width+'px',height: ih*item.height+'px' }"> {{item.name}} <Icon ref="delete" type="ios-backspace" class="itemDelete" size="22" @click="delte(index)"></Icon> </div> </VueDragResize>
<没有删除前 before>

<删除后 after>

change the prop y then the style top is Inaccurate

For the first time，the div top is accurate，then i change the prop y，top also changed，but the top is Inaccurate

怎么修改使点击组件外面后，不需要点击组件才能进行resize

Components incompatibility

I am trying to use vue-drag-resize + vue-smooth-dnd. When I add vue-drag-resize, vue-smooth-dnd stops working correctly.

I also checked combination of vue-draggable-resizebale + vue-smooth-dnd and everything works ok, so I can assume that the problem is somewhere inside vue-drag-resize.

Here is the demo (just remove "<VueDragResize ...>" from template and you will be able to drag tracks without any problems).

EDIT
I found that this issue it due to the document.documentElement.addEventListener('mouseup', this.up), but if to be more specific, due to the ev.stopPropagation() in the up() method.

If I remove it, everything starts to work.
Can you remove it?

Thanks a lot.

Selection of text in modal contents

Hi there, I was wondering if it's possible to selectively enable the resize ability. I have a vue-drag-resize as the base level component, and setting preventActiveBehavior to true also seems to restrict my ability to select text within the component itself (as if user-select: none was active). I was thinking that the intention is that you have a normal base component, i.e. a div, and nest the vue-drag-resize inside of that component, and make it resize the parent once activated? Any comments would be appreciated. I have a form inside of a div that cannot be clicked because the vue-drag-resize takes control of the entire click region (because its z-index is higher)

Here I have a stream of me adding the library to my component (about 1.5 hours in): https://youtu.be/vF908VamoMY
Here's the commit in question: kennymalac/mediacenter@fb9ecee

拖动的时候，会改变宽高

working sample of dragHandle or dragCancel ?

Hi.

Are there any working samples of dragHandle or dragCancel ? I tried the following but did not work. Please let me know.

<vue-drag-resize dragHandle=".drag" with_other_properties>
   <div class="drag">Draggable</div>
   <div>Not Draggable</div>
</vue-drag-resize>

When this code runs, the div is like the following, but it is not draggable.

<div class="drag" data-v-102b6da1="" data-drag-handle="13">Draggable</div>

Thanks.

css problem when inside a parent with text-align: center;

having this component inside another that is text-align: center; will cause this.

Simple fix is to give .vdr.active:before a left: 0;

Possible to manually update x, y, w and h properties?

I want to set the coordinates and size of the drag-item manually using javascript, besides dragging/resizing.

The x,y, w and h properties seem to be only default values.
Is there any way to update the drag-item with new values and display it on its new position?

hide/show manipulators

I am trying to use your component with Vue CLI v3. I'd like to make manipulators hidden.
I tried to use preventActiveBehavior="true" but it doesn't make required impact on the component view.
Is it possible to add a property like hideManipulators="true" ?
Thank you, Kirill

为什么在容器里面放置input，点击无法focus

在vue-drag-resize 中放置input类型的组件，点击该组件区域，无法触发focus，请问下有没有什么办法解决；

我把这个拖拽做成了一个热区编辑，怎样可以回显热区