Comments (20)
I just published vue,.draggable 2.5.0-rc-0 referencing Sortbale 1.5.0-rc1 which contains a fix for this issue,
from vue.draggable.
Hello @jefflam , I will be nice to open a new issue for tracability reason. To undestand better your scenario, could you exlain why you are needing to tack dom changes vs viewmodel changes?
from vue.draggable.
Hello @kisglaci , to solve this, vue,draggable should update to use Sortable 1.5.0-rc2. Current version is not using this release. Temporary by-pass is to use Vue.Draggble v2.4.0 with Sortable 1.5.0-rc2 (changing the depeendy by hand)
from vue.draggable.
Thanks for reporting and providing a fiddle. I will investigate
from vue.draggable.
I'm also experiencing this. Any solution / work-around?
from vue.draggable.
@Muffinman , from quick analysis the problem arises because in case of nested component sortable.js raise an event with wrong oldindex information. See here: https://jsfiddle.net/dede89/8f0yz0m5/
@RubaXa I am opening an issue for Sortable with the simplified scenario
NB: I was not abble to identify a work-arround for this one.
from vue.draggable.
@RubaXa It seems to be exactly the same as SortableJS/Sortable#363. Is this issue corrected in current sortbale npm package?
from vue.draggable.
Looking at the latest stable npm package (v1.4.2) It seems that evt.preventDefault()
is only called in _onTapStart()
if you specify options.filter
when initialising Sortable.
EDIT: It only calls evt.preventDefault()
if the currently tapped element should be filtered - I guess it may be possible to init the parent sortable so that the child elements are filtered and the child sortable so that the parent elements are filtered.
from vue.draggable.
I couldn't get it to work with filters, but it does seem like this issue is fixed in Sortable 1.5.0-rc2 (I've tested and it works).
Hoping they roll out an npm tag soon!
from vue.draggable.
@Muffinman I did also try to play arround with filter and draggable option without success. I will update vue.draggable as soon as Sortable package will be released
from vue.draggable.
@David-Desmaisons I have the same issue, this is my example code: https://jsfiddle.net/4tp3hz87/13/
I found a temporary workaround for this issue, I used the Sortable version 1.5.0-rc1 in the package.json at Vue.Sortable plugin.
from vue.draggable.
I have a related question when I looked into the source code of Vue.Draggable for this issue. Why does Vue.Draggable seem to manipulate DOM (as opposed to just maintaining the state of Vue data and letting Sortable handle DOM exclusively)?
I made an alternative component that is very stupid but seems to work correctly with nested dragging (i.e., the issue here does not occur). The main idea (and the only logic) of my prototype is:
mounted() {
Sortable.create(this.$el, {
onUpdate: (e) => {
this.list.splice(e.newIndex, 0, this.list.splice(e.oldIndex, 1)[0]);
this.$emit('reorder', {
oldIndex: e.oldIndex,
newIndex: e.newIndex,
});
},
});
},
So in other words, why does Vue.Draggable choose a heavier approach than this strawman?
from vue.draggable.
Good question!
The approach you mention wasd the first approach of this library.
The thing is after the drop operation Sortable.js can leave the DOM in a state diferrent from what vue expect and this resulted in nasty bugs in case of use of components, v-if directives, etc...
So the current approach is to "cancel" the dom modification after the drag operation and let vue update the dom based on changes on vm.
This allows also to use vue.js animation in a drag context.
from vue.draggable.
@David-Desmaisons this may be a little off-topic to this thread on nested sorting having issues, but on the point of your approach of "cancelling the dom mod" after drag, how do I then acutally then detect the real 'onEnd' scenario in the DOM manipulation?
The current scenario I have is I have 2 lists wit 2 IDs and 2 items that can be dragged from one list to another.
When I drag one item from one list to another, I call the 'onEnd' event to try to detect which list ID the item is dropped on, so that I can make an API call to update the position change on the database.
However due to the DOM cancellation, during the 'onEnd' event, I end up detecting the original list ID.
Any suggestions? I can also move this to a new topic if that's easier. Thanks!
Edit: In this case, I don't see how I am able to detect the ID of the list when the user drops the item (ends the drag). I am able to detect it using the onMove event, however I am not sure if that's the base practice. What I would have to do then is to maintain the ID of the list in component state as the user drags it around, and only onEnd event do I read the component state and send it to the server.
Edit 2: I take the a previous edit back -- it seems like even on calling the onMove or onUpdate event, the DOM manipulation is cancelled hence returning the DOM state to the original state resulting in the inability for me to properly detect the state of the DOM/position of the objects after the end of the drag...
from vue.draggable.
Will create a new issue and reply to you in that thread, thanks!
from vue.draggable.
I'm experiencing the same issue here: https://jsfiddle.net/oos7u19g/ if it helps;
from vue.draggable.
Does somebody know if this bug's solved already? I've tried v2.4.0 but it's still buggy.
from vue.draggable.
Sortable has only 1.5.0-rc1 currently, not? I've checked the package and it seems to be the case: https://github.com/RubaXa/Sortable/tree/1.5.0-rc1
from vue.draggable.
Sortbale is, but Vue.Draggble v2.4.0 is using 1.4.2
from vue.draggable.
Solved by forking the package and applying the fix. Just in case if somebody need to add it to npm you can use (using sortble 1.5.0-rc1):
"vuedraggable": "https://github.com/kisglaci/Vue.Draggable/archive/v2.4.1.tar.gz"
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
- Address :force-fallback="true" Issue in Cross-List Drag and Drop Cloning with vue-draggable
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.