diff --git a/README.md b/README.md index 93e8cc0..ce3ffde 100644 --- a/README.md +++ b/README.md @@ -136,6 +136,7 @@ interface ICursorPosition { | select(path: number[], addToSelection = false) | Select the node by using its path | | | getNodeEl(): HTMLElement | Get the node HTMLElement by using its path | | getSelected(): ISlTreeNode[] | Get selected nodes | +| insert(position: ICursorPosition, nodeModel: ISlTreeNodeModel) | Insert nodes by the current cursor position. | | remove(paths: number[][]) | Remove nodes by paths. For example `.remove([[0,1], [0,2]])` | getFirstNode(): ISlTreeNode | Get the first node in the tree | | getLastNode(): ISlTreeNode | Get the last node in the tree diff --git a/demo/externaldrag.html b/demo/externaldrag.html index 1a0eaad..82482ff 100644 --- a/demo/externaldrag.html +++ b/demo/externaldrag.html @@ -111,6 +111,7 @@

Sl-vue-tree - drag external elements

methods: { onExternalDropHandler(cursorPosition, event) { + this.$refs.slVueTree.insert(cursorPosition, {title: "Dragged Item", isLeaf: true}); console.log('external drop', cursorPosition); } diff --git a/src/sl-vue-tree.js b/src/sl-vue-tree.js index afc14c7..db625f5 100644 --- a/src/sl-vue-tree.js +++ b/src/sl-vue-tree.js @@ -589,21 +589,7 @@ export default { } // insert dragging nodes to the new place - const destNode = this.cursorPosition.node; - const destSiblings = this.getNodeSiblings(newNodes, destNode.path); - const destNodeModel = destSiblings[destNode.ind]; - - if (this.cursorPosition.placement === 'inside') { - destNodeModel.children = destNodeModel.children || []; - destNodeModel.children.unshift(...nodeModelsToInsert); - } else { - const insertInd = this.cursorPosition.placement === 'before' ? - destNode.ind : - destNode.ind + 1; - - destSiblings.splice(insertInd, 0, ...nodeModelsToInsert); - } - + this.insertModels(this.cursorPosition, nodeModelsToInsert, newNodes); // delete dragging node from the old place @@ -740,6 +726,32 @@ export default { this.emitInput(newNodes); }, + insertModels(cursorPosition, nodeModels, newNodes) { + const destNode = cursorPosition.node; + const destSiblings = this.getNodeSiblings(newNodes, destNode.path); + const destNodeModel = destSiblings[destNode.ind]; + + if (cursorPosition.placement === 'inside') { + destNodeModel.children = destNodeModel.children || []; + destNodeModel.children.unshift(...nodeModels); + } else { + const insertInd = cursorPosition.placement === 'before' ? + destNode.ind : + destNode.ind + 1; + + destSiblings.splice(insertInd, 0, ...nodeModels); + } + }, + + insert(cursorPosition, nodeModel) { + const nodeModels = Array.isArray(nodeModel) ? nodeModel : [nodeModel]; + const newNodes = this.copy(this.currentValue); + + this.insertModels(cursorPosition, nodeModels, newNodes); + + this.emitInput(newNodes); + }, + checkNodeIsParent(sourceNode, destNode) { const destPath = destNode.path; return JSON.stringify(destPath.slice(0, sourceNode.path.length)) == sourceNode.pathStr;