Vue.Draggable:如何“将项目拖到另一个项目上”而不是添加/删除 [英] Vue.Draggable: How to "drag an item onto another item" instead of adding/removing
问题描述
使用 https://github.com/SortableJS/Vue.Draggable
我有一个关于如何实现将文件拖入文件夹的经典示例的问题。
我看到 @change
事件获取有关被拖动项目的数据,但没有关于被拖动项目的数据。
关于如何实现这个目标的任何想法?
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?
以下是一个或多或少看起来的例子,但显然我希望能够重新分配 file.folder_name
里面的 onFoldersChange
- 不知何故。
https://jsfiddle.net/u5nb48cs/2/
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/
谢谢!
推荐答案
如果你想让文件夹包含文件,每个文件夹需要能够保存文件并成为可拖动的目的地。
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>
这篇关于Vue.Draggable:如何“将项目拖到另一个项目上”而不是添加/删除的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!