Vue.Draggable: Как "перетащить элемент на другой элемент" вместо добавления / удаления

Question

Использование https://github.com/SortableJS/Vue.Draggable

У меня есть вопрос о том, как добиться классического примера перетаскивания файла в папку. Я вижу @change событие получает данные о перетаскиваемом элементе, но не об элементе, на который он перетаскивается. Есть идеи, как этого добиться?

Вот пример того, как это будет выглядеть более или менее, но, очевидно, я бы хотел переназначить file.folder_name внутри этого onFoldersChange - как угодно. https://jsfiddle.net/u5nb48cs/2/

Спасибо!

Answer 1

Если вы хотите, чтобы папки содержали файлы, каждая папка должна иметь возможность хранить файлы и быть перетаскиваемым местом назначения.

var vm = new Vue({
  el: "#main",
  data: {
    folders: [{
      name: "Folder1",
      contents: []
    }, {
      name: "Folder2",
      contents: []
    }, {
      name: "Folder3",
      contents: []
    }],
    files: [{
      name: "foo",
      folder_name: "Folder1"
    }, {
      name: "bar",
      folder_name: 'Folder2'
    }]
  },
  methods: {
    onFoldersChange() {
      console.log(arguments);
    }
  }
});

.dragArea {
  min-height: 10px;
}

<script src="//cdn.jsdelivr.net/sortable/1.4.2/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="//cdn.rawgit.com/David-Desmaisons/Vue.Draggable/master/dist/vuedraggable.min.js"></script>
<div id="main">
  <h1>Vue Draggable</h1>
  <div class="drag">
    <h2>Folders</h2>
    <div v-for="(element, index) in folders" :key="index">{{element.name}}
      <draggable v-model="element.contents" class="dragArea" :options="{group:{ put:'files'}}" @change="onFoldersChange">
        <div v-for="item in element.contents">
          {{item.name}}
        </div>
      </draggable>
    </div>

    <h2>Files</h2>
    <draggable v-model="files" class="dragArea" :options="{group:{ name:'files'}}">
      <div v-for="(element, index) in files" :key="index">{{element.name}}</div>
    </draggable>
  </div>

</div>