Question

我有一个遇到问题的组件。我正在使用VueDraggable（这是SortableJS的Vue版本）将项目从ListA拖放到ListB。

ListA必须始终保持不变。此列表不得排序，替换或删除项目。这只是一个可供选择的集合。

列表B空载，用户可以从列表A拖动以填充列表B中的位置。我有这部分工作。但是我遇到了一些困难：

列表B在每个占位符中只能接受一个项目。将其视为棒球场。两个玩家不能同时扮演相同的位置
如果一个占位符已经包含一个项目，并且我拖动了一个新项目，它应该交换它，而不是添加它。再一次，一次仅一项。就像棒球场一样，如果球员受伤，我应该可以代替他
我应该能够从列表B拖动到列表A，以删除该项目并将其再次清空。
我应该能够在ListB中排序。例如，如果它是一个婴儿篮球场，我应该能够从位置1拖动一名球员，并将其与位置2的一名球员交换。

截至目前，我无法选择拖动，使其仅包含一项。即使它说SortableJS属性应该可以工作（：swap =“ true”）

VueDraggable文档不是很好的文档，我的Vue开发也不是很敏锐。我非常需要帮助。作为唯一的Vue开发人员很难。这是我创建的可拖动组件

ListA（来源）

<draggable
   :list="allAgencies"
   :sort="false"
   @start="swap=false"
   :group="{ name: 'agencies', pull: 'clone', put: true }">
   <li v-for="agency in allAgencies" :key="agency.id">
       <div class="cts-split-grid">
          <span>{{agency.title}}</span>
        </div>
   </li>
</draggable>

ListB（目标）

<draggable
   :list="allAgenciesInUse"
   @end="swap=true"
   :sort="false"
   group="agencies">
   <div v-for="agencyinuse in allAgenciesInUse" :key="agencyinuse.id">
       <span>{{ agencyinuse.title }}</span>
   </div>
</draggable>

注册数据更改的方法

methods: {
    ...mapActions(["fetchPods", "fetchAgencies", "fetchAgenciesInUse"]),
    log: function(evt) {
      window.console.log(evt);
    }
},

再次感谢，我知道我不会给您太多帮助:(我希望这里有人可以帮助我。

数据来自API，我添加了一个伪造的json API，并为Ya创建了codesandbox。

从项目列表中仅使用vueDraggable复制一项

0 个答案: