Comments (9)
@jefflam , the screenshots are not enougth unfortunatelly.
A possibility is to add in the event object a property underlyingVM which value would be the underlying model object.
from vue.draggable.
@David-Desmaisons to answer your question: "exlain why you are needing to tack dom changes vs viewmodel changes?"
The reason is because I am currently tracking the position of the item within the list to calculate the new position the item should be (I'm using floating numbers as a way to store positioning of items in a list). I do that by obtaining the positions of the items before and after the newly dragged items within the list and dividing it by 2.
I was previously using Vue-Sortable and that was the method I used to obtain the new position of the dragged item.
However in this case as the DOM manipulation is cancelled even during the onEnd event, I am unable to calculate the new position after the drag.
I attempted to utilize 'watch' in Vue, however the newValue and oldValue in the watch event of the list items do not reflect the changes...
from vue.draggable.
- Short answer: you may use ´´´this.$nextTick´´´ do run the callback so the DOM is updated when the callback is executed
-Long answer: that said I am not clear why you need the DOM tou know the object index: you can use oldIndex and newIndex property values of the add, update, remove event send by the draggable component.
from vue.draggable.
@David-Desmaisons this.$nextTick does indeed show the DOM manipulation, but now it changes the reference to the original object/item that was being dragged/moved in the event (evt.item)...
The reason why I need to DOM is because I am going through the DOM to obtain references of which list the item was being dropped on, as well as the positioning. Indeed, I could refactor my code to utilize the indexes, but I was previously using floating values for positioning.
from vue.draggable.
@jefflam I would strongly recomend using indexes that should be more robuste thean float calculation.
Regarding the problem with this.$nextTick, could provide a fidle with the problem you are mentioning
from vue.draggable.
@David-Desmaisons as wrote above, the reason why I'm not just using indexes is also because I am trying to obtain some attributes that are in the HTML template on the list which the item is dropped.
I'm trying to do a JSFiddle, however this is quite tricky as it requires the dev console + the ability to debug to see how the reference to the event.item changes before and after this.$nextTick is called... so I'm going to attach screenshots to try to explain what I mean.
Here is the default state of list app -- there are 2 'lists', with task items within them. The items can be dragged across to either lists and within each list. Note the name of each item (test, test2, test3):
Now I'm trying to drag item 'test2' to the top of 'test' within the same list. I call the onEnd function when the drag is done, and notice the event.item being referenced is indeed 'test2' (because DOM changes are reset, so test2 is being shown in the original position):
And now this shows the event.item being referenced after the callback, where the DOM manipulation and state is changed. Notice that even though 'test2' is now above 'test', the event.item being referenced is actually 'test'!
As shared, the reason why I want the reference of the item being dragged is so that I am able to detect the elements where the item is being dragged and drop so I can pick up the right attributes. If there is a better way to do that, please do let me know.
from vue.draggable.
@jefflam I would recomend you use a different approach here:
you should not depend on DOM position or event to obtain attributes information. So you should:
- store attribute information in the viewmodel
- map them to the dom if needed using vue template
- for drag and drop use index to get corresponding vm object and then corresponding attribute.
These are high level recomendations, but beste I can do without a fiddle ;)
from vue.draggable.
@David-Desmaisons Fair enough suggestion -- I'm sure I'm 'hacking' the system somehow using the DOM. Although that being said I do have decent reasons...
That being said, the 3rd point on "for drag and drop use index to get corresponding vm object and then corresponding attribute." is quite easier said than done, especially considering that the different lists are also different components that can hold different items and I'm not sure what's the best way to actually monitor for all the changes of items across lists...
I can't do a fiddle, but does my screenshots above make sense?
from vue.draggable.
@David-Desmaisons That's too bad. No worries -- I greatly appreciate your replies and help.
Another reason why I would like to detect the DOM is because I'm also trying to create another area where the user can drag items to, and it drops it to another list. I imagine I am probably hacking too many things with the various libraries. 😄
Will close this issue so you don't have this hanging.
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.