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;
    }
},

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

对此有何帮助？

Answer 1

sortable本身，库Vue.draggable所依据的，没有drop事件处理程序（pyOpenSSL's PKCS7），但这可以帮助您入门：{ {3}}。关键的想法是使用change处理程序：

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

解决方案可以更简单，您可以跟踪futureIndex中的placeholder（并将其保存到return false）和checkMove中的Vuex，然后手动插入通过state.document = state.document.filter((item) => item.value); 自己完成该项目。我目前的解决方案已经做了几乎相同的事情。

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

{{1}}