Vue.Draggable: How to “drag an item onto another i

问题:

Using https://github.com/SortableJS/Vue.Draggable

I have a question on how to achieve the classic example of dragging a file into a folder. I see the @change event gets data about the dragged item, but not about the item that its being dragged onto. Any ideas on how to achieve this?

Here's an example of what it would look like more or less, but obviously I would like to be able to reassign the file.folder_name inside that onFoldersChange - somehow. https://jsfiddle.net/u5nb48cs/2/

Thanks!

回答1:

If you want the folders to contain files, each folder needs to be able to hold files and be a draggable destination.

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>