VueJs ziehbare sortierbare Abbrechen Hinzufügen von Element ohne Abbrechen der ziehen Vorschau

Question

Ich arbeite mit draggable and sortable with vueJS, und ich versuche, etwas zu erreichen, im Grunde habe ich 2 Listen, die erste ist eine Liste mit einigen Abschnitten wie (Tabelle, Absatz. ..) die zweite sind die Bausteine ​​mit dieser Abschnitte, aber im Grunde der Fluss i benötigen, ziehen Sie ein Element aus list1 zu list2, aber fügen Sie nicht das Element dies wichtig ist, weil ich eine modale zuerst öffnen müssen Legen Sie die Eigenschaften des Elements fest, das hinzugefügt wird, und fügen Sie es dann dem futureIndex hinzu.

Im Moment ich eine Lösung, wo ich was ich brauche fast tun, ich muß nur wissen, wie die Zugabe des Elements abzubrechen, ohne mit der Vorschau des Ziehens zu kämpfen, mit Vorschau i dies bedeuten:

Ich möchte den Zusatz der Elment in der Mitte sehen.

Also meine erste Liste Ich habe dies getan:

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

die zweite Liste ist nicht so wichtig, solange ich mit diesem Beitrag verstehen, wie das Element zu bewegen, ohne sie hinzufügen und die Vorschau sehen . Ich hatte am Ende die Rückgabe false hinzugefügt, aber damit kann ich die Vorschau nicht sehen und ich kann keine Elemente zwischen der gleichen Liste ziehen.

Irgendwelche Hilfe dabei?

Answer 1

Die sortable selbst, die Bibliothek Vue.draggable auf basiert, keinen drop Event-Handler (link), aber das kann Ihnen den Einstieg: https://jsfiddle.net/94z81596/10/. Die Schlüsselidee ist die Nutzung der change Handler:

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

Die Lösung kann auch einfacher sein, können Sie einfach den Überblick über die futureIndex (und in die placeholder speichern) und return false in checkMove und dann die manuell einfügen Artikel selbst durch Vuex. Meine jetzige Lösung macht schon fast das Gleiche.

Aber ich sollte die Vorschau halten, damit die Benutzer wissen können, wo sie das Element sind einsetzen. Also habe ich etwas Arbeit gemacht, um die Liste zu reinigen, indem ich folgendes tat:

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