How to achieve consistent width of the dragged item?

[Blankeos]

https://github.com/user-attachments/assets/e1918684-13d6-4ce0-9f0f-5f430d71a3fe

Any way for it to not cause a weird shifting of the width here? My implementation is generally straightforward.

My implementation: https://github.com/Blankeos/car-finance-calculator/commit/e0d53b19900c73ce23f1451545e6155b60f86ab3

[batnieluyo]

¡Hi @Blankeos !

With css you can fix it.

<div style="display: block;">drag me</div>

[Blankeos]

@batnieluyo I assume I apply this block style on the item, right?

I tried removing all flex and just using block for the parent and item and pretty much everything inside and it still does not work.

[Blankeos]

Okay, I figured it out.

Edit: Ignore the explanation below, I realized I'm dum and didn't see the mirror.constrainDimensions: true option.

Solution is to just:

    const sortable = new Sortable(_parentRef()!, {
      draggable: ".sortable-item",
      mirror: {
        constrainDimensions: true,
      },
      distance: 50,
    });

An older solution, if you don't want to use constrainDimensions.

But it's tricky. It's not block. It's just:

• [x] using width: inherit on child.
• [x] using a static width (i.e. width: 300px) on parent.

Explanation, if it helps

I just checked the styles on this 'dragged item'. It's called a 'draggable-mirror' apparently (based on this library's terminology i guess, see the html).

View	HTML

I checked the styles and it boiled down to just:

element.style {
    position: fixed; <-- this
    pointer-events: none;
    top: 0px;
    left: 0px;
    margin: 0px;
    transform: translate3d(109px, 907px, 0px);
}

So position: fixed was causing the issue, because whenever the item has this, it does not follow the width of the parent. The solution to that is just using width: inherit: https://stackoverflow.com/a/5874318/8622733

Anyway, I think it can be closed. But this seems to be very valuable FAQ tbh.