vue-draggable-nested-tree
vue-draggable-nested-tree copied to clipboard
Prevent dropping if level already has X amount of nodes.
I want to prevent "moving" (dragging/dropping) a node to a level that already has a specific number of nodes on that level.
For example, at level 0 (top level) I want to restrict it to just 1 node on that level, and for any other levels (children levels) I want to allow them up to 10 nodes on those levels.
Any idea how this could be accomplished?
I thought that with ondragend() function I could "return false;" after getting the "target node level" and then getting the number of nodes on that target node level, but unfortunately ondragend() does not provide any means to know what level you are moving (dragging/dropping) the node to.
For example:
ondragend(node, draggableHelperInfo){
var maxNodesOnFirstLevel = 1;
var maxNodesOnOtherLevels = 10;
// node.afterDropLevel does not exist, but I wish it did!
// nodesOnDropLevel = add code here to find out how many nodes already exist on the target drop level
if (node.afterDropLevel ==0 && nodesOnDropLevel >= maxNodesOnFirstLevel){
return false;
} else if (nodesOnDropLevel >= maxNodesOnOtherLevels){
return false;
}
sorry for the late reply. check the source about drop event at https://github.com/phphe/vue-draggable-nested-tree/blob/master/src/components/DraggableTreeNode.vue#L61 the moving target is the drag placeholder on drag end. so target level: store.dplh._vm.level
Thank you!
I managed to get it working by finding the target level and also finding the number of nodes on that level at the same time with dplh (drag placeholder):
var targetLevel = this.$refs.tree.dplh._vm.level;
var nodesAtTargetParentCount = this.$refs.tree.dplh.parent.children.length;
Thank you!
I managed to get it working by finding the target level and also finding the number of nodes on that level at the same time with dplh (drag placeholder):
var targetLevel = this.$refs.tree.dplh._vm.level; var nodesAtTargetParentCount = this.$refs.tree.dplh.parent.children.length;
@NeoMarine I'm trying to do something very similar, could you share your code in context of the ondragend
function.
I've tried to write the following
dragend(node, draggableHelperInfo) {
console.log(this.$refs.tree.dplh._vm.level;);
},
However tree
and dplh
are both undefined.