Skip to main content

Rails & Vue.js Trello Clone - Part 4 Discussion

General • Asked by Chris Oliver

I am loving this series! This is such a cool project. The combination of acts_as_list and Vue makes it seem effortless.

I had one minor suggestion for the code in the cardMoved function. Rather than finding the list index, would it be better to just set a constant to the new list itself, and then use that object to set the list_id in the ajax request? Here's what I did:

const card_list = this.lists.find((list) => {
return list.cards.find((card) => {
return card.id === element.id
})
});

Then when setting up data, I did this, which seems a bit cleaner:

data.append("card[list_id]", card_list.id);

Thanks for the great material!

Yeah, that is true since we don't use it really anywhere else. 👍


They updated the draggable package and sadly this no longer works. The end method is completely different response now. I spent a few hours trying to get the JS IDs for the card and list but very frustrating :(

Have any information on that? It looks like the Draggable docs (https://github.com/SortableJS/Sortable#event-object-demo, search for "onEnd") show the following object.

    // Element dragging ended
    onEnd: function (/**Event*/evt) {
        var itemEl = evt.item;  // dragged HTMLElement
        evt.to;    // target list
        evt.from;  // previous list
        evt.oldIndex;  // element's old index within old parent
        evt.newIndex;  // element's new index within new parent
        evt.oldDraggableIndex; // element's old index within old parent, only counting draggable elements
        evt.newDraggableIndex; // element's new index within new parent, only counting draggable elements
        evt.clone // the clone element
        evt.pullMode;  // when item is in another sortable: `"clone"` if cloning, `true` if moving
    },

It's been a while since I did this, so if this changed, then it may need a couple tweaks to match up, but at least here you have information on all the properties from the event.

Unfortunately the new response doesn't return the element that was moved, just the indexes.

The to and from attributes that are returned are HTML / DOM elements, not the javascript objects, so I can't find the ids needed.

CustomEvent {isTrusted: false, to: div.dragArea, from: div.dragArea, item: div.card.card-body.mb-3, clone: div.card.card-body.mb-3, …}
        bubbles: true
        cancelBubble: false
        cancelable: true
        clone: div.card.card-body.mb-3
        composed: false
        currentTarget: null
        defaultPrevented: false
        detail: null
        eventPhase: 0
        from: div.dragArea
        isTrusted: false
        item: div.card.card-body.mb-3
        newDraggableIndex: 0
        newIndex: 0
        oldDraggableIndex: 0
        oldIndex: 0
        originalEvent: DragEvent {isTrusted: true, dataTransfer: DataTransfer, screenX: 695, screenY: 335, clientX: 695, …}
        path: (8) [div.dragArea, div.col-3, div.row.dragArea, div.container.mt-5, body, html, document, Window]
        pullMode: true
        returnValue: true
        srcElement: div.dragArea
        target: div.dragArea
        timeStamp: 8222.279999987222
        to: div.dragArea
        type: "end"
        __proto__: CustomEvent

Ugh, I was looking in the wrong spot. They have a new method (documented separately from the other methods) that has all the data needed.

Tutorial is fine as is with one edit:

From:
<draggable v-model="list.cards" group='cards' class="dragArea" @end="cardMoved">

To:
<draggable v-model="list.cards" group='cards' class="dragArea" @change="cardMoved">

hi, what event to use instead of @change now?


Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 27,623+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.