Vue.Draggable：如何“将一个项目拖到另一个项目上”而不是添加/删除

Posted 2023-05-08

【中文标题】Vue.Draggable：如何“将一个项目拖到另一个项目上”而不是添加/删除

【英文标题】：Vue.Draggable: How to "drag an item onto another item" instead of adding/removing

【发布时间】：2018-06-12 04:59:17

【问题描述】：

使用https://github.com/SortableJS/Vue.Draggable

我有一个问题，关于如何实现将文件拖入文件夹的经典示例。 我看到@change 事件获取有关被拖动项目的数据，但不是关于它被拖动到的项目的数据。 关于如何实现这一点的任何想法？

这是一个或多或少的示例，但显然我希望能够以某种方式重新分配 file.folder_name 内部的 file.folder_name。 https://jsfiddle.net/u5nb48cs/2/

谢谢！

【问题讨论】：

我认为，如果你想让文件夹包含可拖动的项目，每个文件夹都需要是draggable。

你有想过这个吗？

【参考方案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>

【讨论】：

啊，我明白了，这肯定让它更接近一点。然而，另一个要求是文件夹也需要可拖动。关键是我需要一种方法来通过某种 sortableJS 事件知道“哪个文件被放入了哪个文件夹”。从那里，我可以编写修改服务器中数据的逻辑。有任何想法吗？感谢您的回答！

您可以在显示文件夹的部分周围放置另一个<draggable v-mode="folders">。这允许重新排列文件夹。