Currently, I am exploring the functionality of draggable and sortable with VueJS by using Vue.Draggable library. My goal is to create a scenario where I have two lists: the first list contains sections like tables and paragraphs, while the second list consists of building blocks associated with these sections. The workflow I aim for involves dragging an element from the first list to the second list, without immediately adding the element. This step is crucial as I need to open a modal window first to set the properties of the element before adding it to the desired position.
Currently, I have a partial solution that almost meets my requirements. However, I am facing challenges in canceling the addition of the element without affecting the drag preview. By preview, I mean the visual indication of the dragged element shown here:
https://i.sstatic.net/Xf1vu.png
I want to visualize the element being added at the intended drop point.
In the first list setup, I have implemented the following code:
<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 dragged
console.log(evt.draggedContext.futureIndex);
this.dragedIndex = evt.draggedContext.index;
}
},
The setup for the second list is less significant compared to grasping the concept of moving items without immediate addition and having a proper preview display. I have tried using "return false" at the end of my code, but it resulted in issues related to drag previews and movement within the same list.
Any guidance or suggestions on how to achieve this objective would be greatly appreciated.