kirillmurashov / vue-drag-resize Goto Github PK
View Code? Open in Web Editor NEWVue2 && Vue3 Component for resize and drag elements
Home Page: https://kirillmurashov.com/vue-drag-resize/
License: MIT License
Vue2 && Vue3 Component for resize and drag elements
Home Page: https://kirillmurashov.com/vue-drag-resize/
License: MIT License
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 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;
}
}
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>
Withdrawn
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.
It would be cool if it was not just to move the object, but also on some steps
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>
(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.
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?
props
?data: function() {…}
?v-bind
directives?In the example of preventActiveBehavior
we see: <vue-drag-resize :isActive="true">
I guess it must be <vue-drag-resize :preventActiveBehavior="true">
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?
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
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!
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 ?
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.
use NUXT framework, when refresh page, this component is wrong, the compiler is not suport template attribute when running time compile mode
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.
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 :)
在没有设置组件的宽高时,组件可以自己适配宽高吗?
如:
<VueDragResize :isActive="true" v-on:resizing="resize" v-on:dragging="resize">
<h3>Hello World!</h3>
</VueDragResize>
会根据组件里面的<h3>Hello World!</h3>
来自己调整宽高,使得组件的宽高刚好是h3元素的宽高
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):
Thanks a lot!
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
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
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 ?
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.
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.
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 时,然后单击此元素,它似乎没有响应我的操作,无法激活这个元素来调整大小。
场景如下:
1.设置:isActive="true",然后点击其他地方,这个时候,并没有把isActive给设置为false,为了业务需求,那么,当我再次回到这边的时候,拖动却无法响应,一定要点击一次,然后才可以拖动
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?
The events only accept argument with position info,and how do i trans a item or index which from 'v-for' to resizestop event
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
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.
Is any way to snap components to other draggable components or some div ( to parent ) ? Like jQueryUI
https://jqueryui.com/draggable/#snap-to
Thanks
Invalid prop: custom validator check failed for prop "minh"
请问下,怎么去掉这个警告?
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.
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
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,
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.
Is there any way to implement v-on:contextmenu, @contextmenu event listener, this vue2 event listener does not work now?
在vue-drag-resize 中放置input类型的组件,点击该组件区域,无法触发focus,请问下有没有什么办法解决;
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)
};
}
:D
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?
For the first time,the div top is accurate,then i change the prop y,top also changed,but the top is Inaccurate
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
Right click the vue-drag-resize
component, and left click somewhere, the component will flash to the left clicked position.
suggestion:
onlyPrimaryButton
whose default value is false.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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.