Dragged item is placed below footer

[iliubinskii]

Jsfiddle link

https://sortablejs.github.io/vue.draggable.next/#/two-list-headerslots

Step by step scenario

The above link points to your demo.

Try to drag item from the second list to the first list from below. I am doing this in FF. Here is the result:

Note that "Jonny 4" is under the footer. I think this is not right.

After I drop item it is placed correctly

[boboldehampsink]

Also seeing this issue

[OneFourFree]

Same, is there a workaround for this?

[spixy]

also have this issue, for now no workaround found

[radek-altof]

Same here 😕 This needs to be fixed.

In the meantime, I have a small workaround - register the :move="onMove" callback on the draggable element. Assuming that footer is always present and one element only.

async function onMove (e) {
    // Wait for DOM to be updated
    await nextTick();

    // Move the element before footer if needed
    if (e.to.lastElementChild === e.dragged) {
        e.to.removeChild(e.dragged);
        e.to.insertBefore(e.dragged, e.to.lastElementChild);
    }
}

[vaheqelyan]

any updates on this ?

[vaheqelyan]

Same bug happens here https://sortablejs.github.io/Vue.Draggable/#/footerslot (SortableJS/Vue.Draggable)

https://user-images.githubusercontent.com/14107127/220333225-af33c8d7-0100-470b-8481-548516db7a87.mp4

[chris-mackie]

If anyone else if having an issue, this solution worked for me:

function fixFooter(e) {
   if (e.relatedContext.list.length === e.draggedContext.futureIndex) {
     let newListDom = e.to
 
     let newListFooter = e.to.lastChild
     nextTick(() => {
       newListDom.appendChild(newListFooter);
     });
   }else {
     let currentListDom = e.from;
     let currentListFooter = e.from.lastChild;
     nextTick(() => {
       currentListDom.appendChild(currentListFooter);
     });
   }
 }

Then add :move="fixFooter" to your draggable element.

[webskimajster]

There is also another solution for this without using JavaScript, which works better if we want to use a transition effect. The previous solutions do not work properly with transitions; the footer jumps instead of transitioning smoothly.

My solution was to set the parent's display property to display: flex. Then, I added order: 1 to all child elements, but for the footer element, I added order: 2. This simple workaround works like a charm for me.