VueJs draggable sortable取消添加元素不取消拖动预览

Question

我正在与 draggable and sortable with vueJS 合作，我正在努力完成一件事，基本上我有 2 个列表，第一个是包含某些部分的列表，例如 (table，段落 .. .) 第二个是这个部分的构建块，但基本上我需要的流程是，将元素从 list1 拖到 list2， 但不要添加元素 这很重要，因为我需要先打开一个modal来设置要添加的元素的属性，然后将其添加到futureIndex中。

目前我有一个解决方案，我几乎可以做我需要的，我只需要了解如何取消元素的添加而不用在拖动预览中挣扎，预览我的意思是：

我想看看中间元素的添加

所以我的第一个清单是这样做的：

<draggable v-model="sectionList" class="dragArea" @end="changeView()" :move="moveItem" :options="{group:{ name:'sections',pull:'clone',put:false }}">
    <div v-for="(section, index) in sectionList"  class="card card-color list-complete-item">
        <div class="card-block">
            <h4 class="card-title text-center">{{section.text}}</h4>
        </div>
    </div>
</draggable>

methods: {
    addParagraph() {
        this.$set(this.paragraph, 'key', this.key);
        this.$set(this.paragraph, 'text', this.text);
        this.$set(this.paragraph, 'fontSize', this.fontSize);
        this.$store.commit("appendToDocument", this.paragraph)
    },
    changeView: function () {
        this.$store.commit("changeCurrentView", this.sectionList[this.dragedIndex].component);
        this.show();
    },
    show() {
        this.$modal.show('modalSection');
    },
    hide() {
        this.$modal.hide('modalSection');
    },
    currentIndex(evt) {
        console.log(evt.draggedContext.index);
    },
    moveItem(evt) { // future index of the modal that will be draged
        console.log(evt.draggedContext.futureIndex);
        this.dragedIndex = evt.draggedContext.index;
    }
},

第二个列表不是那么重要，只要我能理解这个post，如何在不添加项目的情况下移动项目并查看预览。我在末尾添加了 return false，但是我无法看到预览，也无法在同一列表之间拖动元素。

有什么帮助吗？

Answer 1

sortable 本身，库 Vue.draggable 是基于的，没有 drop 事件处理程序（link), but this can get you started: https://jsfiddle.net/94z81596/10/。关键思想是利用change 处理程序：

<draggable 
  id="list2" 
  class="dragArea" 
  :options="{group:'people'}" 
  @change="afterAdd"
  :list="gDocument">
...
</draggable>

解决方案可以更简单，你可以只跟踪futureIndex（并将其保存到placeholder）和checkMove中的return false，然后通过 Vuex 自己手动插入项目。我目前的解决方案已经在做几乎相同的事情。

但我打算保留预览，以便用户可以知道他们插入元素的位置。所以我做了一些工作来清理列表：

state.document = state.document.filter((item) => item.value);

VueJs draggable sortable取消添加元素不取消拖动预览

VueJs draggable sortable cancel adding element without cancel the drag preview

javascript

draggable

jquery-ui-sortable

vue.js

vuejs2