Comments (7)
ondragend(store) {
console.log(store.startPath);
console.log(store.targetPath);
console.log(store.targetPath.parent[store.targetPath.index]) // In ondragend hook, data is not modified yet, so it should be node 1
// targetPath structure
/*
{
tree: Draggable;
parent?: Node;
index: number;
}
*/
}
from he-tree-vue.
Thanks for the response @phphe , I have tried it but it gets undefined when dragging the item? is there something wrong?
from he-tree-vue.
Actually I want to get value data before updating and after updating, to be used later to compare the data and change the order data.
Now I try with this code, but the condition is always false( this is always false: if (item.ChapterPlaylistId !== startItems[index].ChapterPlaylistId
), so the input array variable is always empty, any ideas how to do it right?
updatePlaylistOrder(tree, store) {
const startPath = store.startPath;
const targetTree = store.targetTree.value;
const startTree = store.startTree.value;
const startItems = startTree[startPath[0]].children[startPath[1]].children;
const targetItems = targetTree[startPath[0]].children[startPath[1]].children;
const input = [];
targetItems.forEach((item, index) => {
if (item.ChapterPlaylistId !== startItems[index].ChapterPlaylistId) { // this is always false because the data is same
if (!targetItems[index - 1]) {
input.push({
ChapterPlaylistOder: 0,
ClassPlaylistId: item.course_playlists[0].content_playlist.ClassPlaylistId,
CoursePlaylistId: item.course_playlists[0].content_playlist.CoursePlaylistId,
ChapterPlaylistId: item.course_playlists[0].content_playlist.ChapterPlaylistId,
});
} else {
input.push({
ChapterPlaylistOder: targetItems[index-1].course_playlists[0].content_playlist.ChapterPlaylistOrder + 1,
ClassPlaylistId: item.course_playlists[0].content_playlist.ClassPlaylistId,
CoursePlaylistId: item.course_playlists[0].content_playlist.CoursePlaylistId,
ChapterPlaylistId: item.course_playlists[0].content_playlist.ChapterPlaylistId,
});
}
}
});
console.log("input", input); // empty
}
from he-tree-vue.
const startItems = startTree[startPath[0]].children[startPath[1]].children;
startPath is not array, it is object.
This may help, when ondragend hook be called, data is still not changed. in event drop
, the data is changed.
from he-tree-vue.
thanks for the response, from the console.log code below isn't startPath an array?
I also tried using the drop
event, but the data from targetTree and startTree are still the same, so the input array is empty.
from he-tree-vue.
Sorry, I made a mistake.
The targetPath
still point to the original node. I think you want to get the node after the moved node. Check follow code.
<Tree @drop="ondrop" />
ondrop(store) {
let t = store.targetPath.slice(0)
t[t.length - 1]++
console.log(store.targetTree.getNodeByPath(t));
}
The code will throw error if the next node does not exist.
from he-tree-vue.
Sorry, I made a mistake.
The
targetPath
still point to the original node. I think you want to get the node after the moved node. Check follow code.<Tree @drop="ondrop" />
ondrop(store) { let t = store.targetPath.slice(0) t[t.length - 1]++ console.log(store.targetTree.getNodeByPath(t)); }The code will throw error if the next node does not exist.
The issue has been fixed since [email protected]. This example is deprecated.
from he-tree-vue.
Related Issues (20)
- Drag items outside the tree HOT 1
- The events do not work for Vue3 HOT 1
- Wrong index of dragged node when drop it after another node HOT 1
- Event node-folded-changed not emited on fold node HOT 1
- How to add specific data to nested children in he-tree-vue HOT 1
- [vite dev] Error loading external "node_modules/tslib/tslib.es6.js". HOT 1
- with vite : @babel does not provide an export named 'default'
- how to delete a node using by id (unique) HOT 8
- Is this library deprecated HOT 1
- Expand all ancestors HOT 5
- Problem use he-tree-vue HOT 5
- Droppable false not working HOT 2
- Demo3Fold.vue not working in vue 3 HOT 1
- display the treeData structure in reverse order HOT 1
- How to disable placeholder display? HOT 1
- Get Parent Node Of the dropped Node HOT 2
- Limit the depth of tree HOT 3
- Unfold to path HOT 7
- Create an emit for nodecreated? HOT 1
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 he-tree-vue.