CODEWITHSUNDEEP
javascriptvue.jsvuejs2draggablejquery-ui-sortable
Filipe Costa
Filipe Costa

Reputation: 555

VueJs draggable sortable cancel adding element without cancel the drag preview

I am working with draggable and sortable with vueJS, and i am trying to accomplish a thing, basicly i have 2 lists, the first one is a list with some sections like (table, paragraph ...) the second one are building blocks with this sections, but basicly the flow i need is, drag a element from list1 to list2, but don't add the element this is important because i need to open a modal first to set the properties of the element that will be added, and then add it to the futureIndex.

At the moment i have a solution where i can do almost what i need, i just need to understand how to cancel the addition of the element without struggling with the preview of the dragging, with preview i mean this:

enter image description here

i wanna see the adition of the elment at the middle.

So my first list i have done this:

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

the second list is not that important, as long as i can understand with this post, how to move the item without adding it and see the preview. i had added the return false at the end but with that i can't see the preview and i can't drag elements between the same list.

Any help with this?

Upvotes: 1

Views: 3995

Answers (1)

kevguy
kevguy

Reputation: 4438

The sortable itself, the library Vue.draggable is based on, doesn't have a drop event handler (link), but this can get you started: https://jsfiddle.net/94z81596/10/. The key idea is making use of the change handler:

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

The solution can be even simpler, you can just keep track of the futureIndex (and save it into the placeholder) and return false in checkMove and then manually insert the item yourself through Vuex. My current solution is already doing the almost same thing.

But I intended to keep the preview so the user can know where they're inserting the element. So I did some work to clean the list by doing this:

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

Upvotes: 2

Related Questions