holiber / sl-vue-tree

Customizable draggable tree component for Vue.js
MIT License
344 stars 79 forks source link

traverse tree after drag/drop #29

Closed lazylester closed 5 years ago

lazylester commented 5 years ago

I have been unable to add a drop handler to the demo, so I can't demonstrate this to you. But this is what I'm seeing in my app...

In the drop handler, I traverse the tree in order to sync the backend with the drag/drop event. However tree traversal (slVueTree.traverse) at this time finds the dragging nodes in both their original, pre-drag, position and also in the position in which they were dropped.

(if you can add a drop handler to the demo, I can probably offer the code that demonstrates this problem)

This is my drop handler:

    drop_handler: function(draggingNodes,position,event){
      const url = this.$store.state.staff_resource_path
      const data = {};
      slVueTree.traverse(function(node){data[JSON.stringify(node.path)] = {id: node.title.id, isFile: node.isLeaf}})
      $.ajax({
        url: url,
        data: data,
        method: 'put'
      })
    }
lazylester commented 5 years ago

well for posterity I'll explain... If sl-vue-tree is embedded inside a 'typical' vuejs/vuex app we will encounter a timing race between updating the vuex store (async) and the drop event. This can result in the drop event triggering before the vuex store is updated.

I'm not sure how to solve it, but I suspect that it will not be solved inside sl-vue-tree, but instead in the app. If I happen to find a solution within sl-vue-tree, I'll generate a PR.