onEnd event update does not reflect the newly sorted element in DOM about vue.draggable HOT 9 CLOSED

@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.

@jefflam.

• 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.