<!DOCTYPE html>
<html>
<head>
<title>Drag & Drop</title>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/liquor-tree"></script>
</head>
<body>
<div id="app">
<tree
:data="treeData"
:options="treeOptions"
@node:dragging:start="logDragStart"
@node:dragging:finish="logDragFinish"
/>
</div>
<script>
new Vue({
el: '#app',
data: () => ({
treeData: getTreeData(),
treeOptions: {
propertyNames: {
text: 'MY_TEXT',
children: 'KIDS',
state: 'OPTIONS'
},
dnd: true,
checkbox: true
}
}),
methods: {
logDragStart(node) {
console.log('Start dragging: ' + node.text)
},
logDragFinish(targetNode, distinationNode) {
console.log(`Stop dragging: [TARGET]${targetNode.text}`)
}
}
})
function getTreeData() {
return [
{
MY_TEXT: 'PARENT1',
OPTIONS: { draggable:false},
KIDS: [
{ MY_TEXT: 'Parent1 - Child1' },
{ MY_TEXT: 'Parent1 - Child2' },
{ MY_TEXT: 'Parent1 - Child3'},
{ MY_TEXT: 'Parent1 - Child4'}
]},
{
MY_TEXT: 'PARENT2',
OPTIONS: { draggable:false},
KIDS: [
{ MY_TEXT: 'Parent2 - Child1' },
{ MY_TEXT: 'Parent2 - Child2' },
{ MY_TEXT: 'Parent2 - Child3'},
{ MY_TEXT: 'Parent2 - Child4'}
]},
{
MY_TEXT: 'PARENT3',
OPTIONS: { draggable:false},
KIDS: [
{ MY_TEXT: 'Parent3 - Child1' },
{ MY_TEXT: 'Parent3 - Child2' },
{ MY_TEXT: 'Parent3 - Child3'},
{ MY_TEXT: 'Parent3 - Child4'}
]},
{
MY_TEXT: 'PARENT4',
OPTIONS: { draggable:false},
KIDS: [
{ MY_TEXT: 'Parent4 - Child1' },
{ MY_TEXT: 'Parent4 - Child2' },
{ MY_TEXT: 'Parent4 - Child3'},
{ MY_TEXT: 'Parent4 - Child4'}
]}
]
}
</script>
</body>
</html>
question from:
https://stackoverflow.com/questions/65892541/liquor-tree-drag-and-drop-how-to-prevent-drop-create-a-parent-node-from-a-drag 
