1

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

子项不能成为项，项也不能是子项。

这是代码：

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>

通过运行我的代码，你会发现它可以：

  1. 通过拖动重新排序项目。
  2. 通过拖动重新排序属于某个项目的子项目。例如，您可以通过拖动来更改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"]
   },
]
4

0 回答 0