중첩된 vue-draggable 요소

중첩된 vue-draggable 요소

(반복 가능성이 있는) 곡 구조를 시각적으로 표현하기 위해 중첩된 vue-dragable 요소를 사용하려고 합니다.

시제품으로서 생각해 낸 것은 다음과 같습니다.

var vm = new Vue({
  el: "#main",
  data: {
    "structure": ["Prelude", "Verse", ["Chorus", "Verse"], "Last Chorus"]
  },
});

#main {
  text-align: center;
  width: 300px;
  background-color: #EEE;
  padding:10px;
}

.element {
  text-align: center;
  padding: 10px;
  margin: 5px auto;
  border-radius: 10px;
  color: #FFF;
  font-family: sans-serif;
  font-weight: bold;
}

.tag {
  width: 150px;
  background-color: #007BFF;
}

.group {
  width: 175px;
  border: 3px solid #CED4DA;
  background-color: #FFF;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.15.0/vuedraggable.min.js"></script>

<div id="main">
  <draggable v-for="tag in structure" :options="{group:'tags'}">
    <div v-if="!Array.isArray(tag)" class="tag element">
      {{tag}}
    </div>
    <draggable v-else :options="{group:'tags'}" class="group element">
      <div v-for="tag2 in tag" class="tag element">
        {{tag2}}
      </div>
    </draggable>
  </draggable>
  {{structure}}
</div>

Vue.js가 처음이라 해도 이 방법은 그다지 '길'이 아닌 것 같습니다.이 솔루션의 구체적인 문제는 다음과 같습니다.

• 그룹화 요소가 맨 위에 있으면 그 위에 있는 다른 요소를 끌 수 없습니다(맨 아래에도 동일).
• 끌어온 구조가 data.structure 속성에 표시되지 않습니다.
• 더 이상 둥지를 틀려면 어떻게 해야 하죠?그룹 내 그룹 내 그룹...

다음 작업을 수행해야 합니다.

1) 데이터 구조를 재귀 구조로 변경한다:

 data: {
    "structure": [
       { name: "Prelude"}, 
       { name: "Verse"}, 
       { name: "Middle", children: [{ name: "Chorus"}, { name: "Verse"}]}, 
       { name: "Last Chorus"}
    ]
  },

2) 드래그 가능을 사용한 재귀 컴포넌트 사용:

<template>
  <draggable class="dragArea" tag="ul" :list="data" :group="{ name: 'g1' }">
    <li v-for="el in children" :key="el.name">
      <p>{{ el.name }}</p>
      <nested-draggable v-if="el.children" :tasks="el.children" />
    </li>
  </draggable>
</template>

다음의 작업 예를 참조해 주세요.

https://sortablejs.github.io/Vue.Draggable/#/http:/http:/http://

언급URL : https://stackoverflow.com/questions/53307959/nested-vue-draggable-elements