VueJs可拖动可排序取消添加元素而不取消拖动预览

Question

我正在与draggable and sortable with vueJS 合作，我正在努力完成一件事，基本上我有 2 个列表，第一个是包含一些部分的列表，例如（表格、段落 ...）第二个是构建块有了这个部分，但基本上我需要的流程是，将一个元素从 list1 拖到 list2，但不要添加元素这很重要，因为我需要先打开一个模式来设置将要添加的元素，然后将其添加到 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;
    }
},

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

有什么帮助吗？

Answer 1

sortable 本身，Vue.draggable 所基于的库，没有 drop 事件处理程序 (link)，但这可以帮助您入门：https://jsfiddle.net/94z81596/10/。关键思想是利用change 处理程序：

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

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

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

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