Question

我想实现一个列表，该列表可以通过拖动重新排序。列表中的项目将包含一些子项目，这些子项目也可以通过拖动来重新排序。

子项目不能成为项目，项目不能成为子项目。

代码如下：

var vm = new Vue({
  el: "#main",
  data: {
    list: [
       {
         name: "item1",
         sons: ["sub_item1", "sub_item4"]
       },
       {
         name: "item2",
         sons: ["sub_item2"]
       },
       {
         name: "item3",
         sons: ["sub_item3"]
       },
    ]
  },
});

#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;
}

.primary {
  margin-top: 20px
}

.sub {
  width: 100px;
}
/* .sub {
  margin-right: 50px;
} */

<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-model="list" group="group1">
  <div v-for="e in list">
   <div class="tag element primary">
      {{e.name}}
    </div>
    <draggable v-model="e.sons" group="group2">
    <div v-for="son in e.sons" class="tag element sub">
          {{son}}
    </div>
    </draggable>
  </div>
  </draggable>
  {{list}}
</div>

运行我的代码，您将发现它可以：

通过拖动重新排序项目。
通过拖动重新排序属于某个项目的子项目。例如，您可以通过拖动来更改sub_item1和sub_item4的顺序。

但是它不能将sub_item2拖到item1的子项目中。换句话说，我只是希望通过拖动来使模型list像这样：

list: [
   {
     name: "item1",
     sons: ["sub_item1", "sub_item4", "sub_item2"]
   },
   {
     name: "item2",
     sons: []
   },
   {
     name: "item3",
     sons: ["sub_item3"]
   },
]

Vue.draggable：为什么不能将子项目拖到另一个项目？

0 个答案: