vue-draggable-nested-tree icon indicating copy to clipboard operation
vue-draggable-nested-tree copied to clipboard

Prevent dropping if level already has X amount of nodes.

Open NeoMarine opened this issue 5 years ago • 3 comments

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;

}

NeoMarine avatar Mar 26 '19 06:03 NeoMarine

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

phphe avatar Apr 01 '19 02:04 phphe

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 avatar Apr 02 '19 02:04 NeoMarine

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.

felixpenrose avatar May 20 '19 10:05 felixpenrose