Giter Club home page Giter Club logo

Comments (9)

David-Desmaisons avatar David-Desmaisons commented on July 26, 2024 1

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

jefflam avatar jefflam commented on July 26, 2024

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

David-Desmaisons avatar David-Desmaisons commented on July 26, 2024

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

jefflam avatar jefflam commented on July 26, 2024

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

David-Desmaisons avatar David-Desmaisons commented on July 26, 2024

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

jefflam avatar jefflam commented on July 26, 2024

@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):

screen shot 2016-11-30 at 9 24 54 am

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):

screen shot 2016-11-30 at 9 25 11 am

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'!

screen shot 2016-11-30 at 9 25 31 am

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.

David-Desmaisons avatar David-Desmaisons commented on July 26, 2024

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

jefflam avatar jefflam commented on July 26, 2024

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

jefflam avatar jefflam commented on July 26, 2024

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

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

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.