Comments (8)
In the codebase, the events emitted are "dragStop" and "resizeStop", and Vue provide an automatic case transformation for event names.
So try:
@drag-stop="console.log('Drag Stop')"
@resize-stop="console.log('Resize Stop')"
from vue-draggable-resizable.
I am curious why it worked in Vue2, Vue3 seems stricter than Vue2.
from vue-draggable-resizable.
It seems Vue3 provided some automatic case transformation feature to align with the nature of "props".
from vue-draggable-resizable.
Thank you @drag-stop and @resize-stop worked!
from vue-draggable-resizable.
Closing issue.
To catch drag stop and resize stop event use following -
@drag-stop="console.log('Drag Stop')"
@resize-stop="console.log('Resize Stop')"
from vue-draggable-resizable.
It seems Vue3 provided some automatic case transformation feature to align with the nature of "props".
Actually, I still don't understand.
As the documentation illustrated, v-on:dragStop
will become v-on:dragstop
in Vue2 because DOM template automatically transforms it to lowercase. So, the @dragstop
shouldn't work in Vue2 as Vue-Draggable-Resizable emits dragStop
event which is camel case and dragstop
doesn't match dragStop
. However it actually works ok in Vue2.
How to explain this one?
from vue-draggable-resizable.
Event in Vue2:
Event in Vue3:
It seems Vue3 provided some automatic case transformation feature to align with the nature of "props".Actually, I still don't understand. As the documentation illustrated,
v-on:dragStop
will becomev-on:dragstop
in Vue2 because DOM template automatically transforms it to lowercase. So, the@dragstop
shouldn't work in Vue2 as Vue-Draggable-Resizable emitsdragStop
event which is camel case anddragstop
doesn't matchdragStop
. However it actually works ok in Vue2. How to explain this one?
You are right and I am sure you understand the Vue2 case transformation very well.
Coz I have took a look into the commit history and found these two small changed.
So before 16/04/2023, @dragstop worked fine all the way. : )
from vue-draggable-resizable.
Event in Vue2:
Event in Vue3:
It seems Vue3 provided some automatic case transformation feature to align with the nature of "props".Actually, I still don't understand. As the documentation illustrated,
v-on:dragStop
will becomev-on:dragstop
in Vue2 because DOM template automatically transforms it to lowercase. So, the@dragstop
shouldn't work in Vue2 as Vue-Draggable-Resizable emitsdragStop
event which is camel case anddragstop
doesn't matchdragStop
. However it actually works ok in Vue2. How to explain this one?You are right and I am sure you understand the Vue2 case transformation very well.
Coz I have took a look into the commit history and found these two small changed.
So before 16/04/2023, @dragstop worked fine all the way. : )
Not only in vue-draggable-resizable
, in Vue2, any custom event with camel case name can be listened with camel case listener correctly. Not as that illustrated in Vue2 Doc. So wired.
from vue-draggable-resizable.
Related Issues (20)
- Why can I just click and drag it over?
- Storybook: "Advanced -> Parent resize" has no effect HOT 1
- resizing事件返回的参数width为负数
- Error: Cannot read properties of null (reading 'closest')
- 如何在拖动结束事件onDragstop 中获取左右移动的距离X,Y
- The coordinate and width doesnt fix on fullscreen mode
- trying to programmatically update refs for x,y,w,h and x,y don't seem to work HOT 1
- resizing width height NaN HOT 3
- In Nuxt 3, why is there no resize functionality HOT 7
- [bug?] should not warn when w is `0`: [Vue warn]: Invalid prop: custom validator check failed for prop "w".
- Multiple addition of elements to 1 parent HOT 1
- vue-draggable-resizable
- Ability to reset inner `width`, `height` to `'auto'` HOT 3
- multi draggable ,how can i get each position ?
- not working correctly in 'direction : rtl'
- Drag in Safari
- 这个组件和vue-drag-resize组件是什么关系?是vue-drag-resize组件的升级改造版吗
- width and height are NaN HOT 2
- Chrome warning regarding non-passive listeners.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-draggable-resizable.