Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to achieve consistent width of the dragged item? #619

Open
Blankeos opened this issue Jan 4, 2025 · 3 comments
Open

How to achieve consistent width of the dragged item? #619

Blankeos opened this issue Jan 4, 2025 · 3 comments

Comments

@Blankeos
Copy link

Blankeos commented Jan 4, 2025

inconisstent-width.mp4

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

My implementation: Blankeos/car-finance-calculator@e0d53b1

@batnieluyo
Copy link

¡Hi @Blankeos !

With css you can fix it.

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

@Blankeos
Copy link
Author

@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.

Image Image

@Blankeos
Copy link
Author

Blankeos commented Feb 16, 2025

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:

  • using width: inherit on child.
  • 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
Image Image

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants