VueJS drag and drop [Нужно простое исправление CSS]

Question

Я работаю над проектом, который основан на VueJS и нуждается в опции drag & drop + nestable, как я продемонстрировал ниже.Пока что многого добился, однако пока не могу понять, почему рекурсивная функция не работает хорошо.

Может кто-нибудь помочь мне разобраться?JSFiddle также прикреплен внизу.

ОБНОВЛЕНИЕ: Я только что понял, это всего лишь CSS проблема.Таким образом, любой эксперт CSS, который может помочь мне в этом?

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/sortablejs@1.7.0"></script>
<script src="https://unpkg.com/vuedraggable@2.16.0/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>

---

В случае, если я прикрепил JSFiddle: https://jsfiddle.net/minuwan/nb15jd48/

Answer 1

вы можете сделать так.

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;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.dragArea .dragArea > .parent {
  position: relative;
  padding-left: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/sortablejs@1.7.0"></script>
<script src="https://unpkg.com/vuedraggable@2.16.0/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>