Vue.Draggable: How to “drag an item onto another item” instead of adding/removing

不打扰是莪最后的温柔 提交于 2019-12-06 05:36:59

问题


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>


来源:https://stackoverflow.com/questions/48061794/vue-draggable-how-to-drag-an-item-onto-another-item-instead-of-adding-removin

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!