Comments (3)
Thanks for your answer @David-Desmaisons .
In my case, I need to use Vuex because the data I'm managing will be saved to a file and reused in other parts of my electron app, but you gave me an idea, use a computed as the source of the list parameter with a proxy array that send the changes to the store.
I think that it has some performance overhead but not on a critical part of my application so i can deal with it.
I let you a fiddle with this solution implemented to serve as future documentation if someone has the same issues as me. If you want, you can use it as Vue.Draggable with Vuex documentation.
Thanks again!
from vue.draggable.
Hi @Nrqz , what is hapening in your scenario is that:
- Sortable is performing changes in the DOM to reflect drag and drop
- Draggable component does not perform any DOM changes as the list options is null (when the list is not null, draggable componet perform an "undo" on changes performed by Sortable)
- OnEnd event performs changes on the list
- Vue.js sees change in the list and updates the DOM but since the DOM has been altered by Sortable, the DOM changes provided by vue.js will not reflect the real state of the list.
As for today, the only work-around is to use list option and by-pass Vuex store.
To handle your need a possibility would be to provide a draggable option that would not perform list synchronization but will "revert" drag-and-dom DOM modification, kind of a manual mode.
This mode should be used very carefully since any changes in the list should be changed by ad-hoc state changes in the store, otherwise inconsistency will be introduced.
I am not sure to what extend you need the store in this case ans I wiould like to hear from you the benefit from this approach. Because if you want to go this way, you will need to re-implement many scenarios (paste between lists, case where DOM index does not match list index, ect..) that are already supported using the list option.
I would like to hear your feedback.
from vue.draggable.
Thanks @Nrqz for the feedback and the fidlle!
from vue.draggable.
Related Issues (20)
- 拖动到窗口下边缘的时候怎么触发滚动?
- Has anyone found a solution for Max depth nesting with vue-draggable? If there is any parameter for setting the maximum depth in the nested solution?
- 判断被拖拽元素是否在目标区域内并阻止拖拽
- TypeError: Cannot read properties of undefined (reading 'class')
- Draggable preventing scroll behavior HOT 1
- [feature request] typing for `change` event
- Has this project stopped updating and maintaining
- New draggable under maintenance HOT 1
- Incorrect display of the sheet after dragend HOT 2
- npm i -S vuedraggable 直接报错
- VueDraggable only @choose @unchoose events only getting triggered in vue2.7.15 version
- Please set the `latest` npm tag to v4
- Not working with Socket.io
- How to disable draggable in vue draggable HOT 1
- How to import nested-draggable component ? Vue2
- Triggering drag and drop programmatically
- Missing required prop: "itemKey"
- how to lock vuedraggable for specific array nested level
- Nested Draggable Input with v-model automatically blurs
- Incorrect Visual Representation After Transferring All Items Between Groups
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.