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

Question

我正在使用 draggable and sortable with vueJS ，我正在尝试完成一件事，基本上我有 2 个列表，第一个是包含某些部分的列表，例如(表格，段落......)第二个是包含这些部分的构建 block ，但基本上是我需要的流程是，将一个元素从 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>

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

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

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