I've been working on a VueJS project that requires a drag & drop + nestable feature, as illustrated below. I have made significant progress, but I am struggling with a recursive function issue.
Could anyone help me troubleshoot this? A JSFiddle link is provided below for reference.
UPDATE: I have identified that the problem lies within a CSS issue. Any CSS experts available to assist?
var local = {
template: '#template-drag',
name: 'local-draggable',
props: ['tasks']
};
new Vue({
el: "#app",
components: {
"local-draggable" : local
},
data: {
"tasks": [
{
"name": "task 1",
"tasks": []
},
{
"name": "task 2",
"tasks": []
},{
"name": "task 3",
"tasks": []
},
{
"name": "task 4",
"tasks": []
},
{
"name": "task 5",
"tasks": []
},
{
"name": "task 6",
"tasks": [
{
"name": "task 6.1",
"tasks": []
}
]
}
]
},
});.parent{
position: relative;
padding-left: 15px;
}
.dragArea {
border: 1px dashed;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.dragArea .dragArea > .parent {
position: relative;
padding-top: 23px;
padding-left: 30px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/email-protection#[email protected]"></script>
<script src="https://unpkg.com/email-protection#[email protected]/dist/vuedraggable.js"></script>
<script type="text/x-template" id="template-drag">
<draggable :element="'div'" :list="tasks" class="dragArea" :options="{group:{ name:'g1'}}" >
<template v-for="el in tasks" class="parent">
<div class="parent">
<p>{{el.name}} - {{el.tasks}}</p>
<local-draggable :tasks="el.tasks"/>
</div>
</template>
</draggable>
</script>
<div id="app">
<local-draggable :tasks="tasks"/>
</div>For further reference, here is the JSFiddle link: https://jsfiddle.net/minuwan/nb15jd48/