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

[bug] SortableJS destroys transform CSS attribute for dragged element as well as any the drag repositions if animation is > 0. #2423

Open
gkilwein opened this issue Feb 12, 2025 · 0 comments

Comments

@gkilwein
Copy link

Describe the bug

SortableJS destroys the transform CSS attribute for dragged element as well as any the drag repositions if animation > 0. If animation === 0, then the transform is only destroyed on the element being dragged.

Regardless of animation, SortableJS always destroys the transform CSS attribute for the dragged element.

I was able to work around this by setting animation to 0 and adding an onChoose event that captures evt.item.style.transform and saves it to a JavaScript variable, then setting a 200ms timeout on the onEnd function that restores transform to the original value.

I would like to be able to use animation as well.

To Reproduce

  1. Set animation to a value > 0
  2. Set style="transform:rotate(5deg);" to all of the elements that are being dragged.
  3. Drag one of the elements
  4. The rotation is removed during the drag: first, for the dragged element, then as you mouse over the others, for each element that is moved.

See this fiddle: https://jsfiddle.net/4xbg670q/

Expected behavior

After dragging, all of the original CSS transform values should be restored to what they were before the drag started (including prefixes like -webkit-transform).

Information

sortablejs = ^1.15.6
@types/sortablejs = ^1.15.6

Additional context
None.

Reproduction
See this fiddle: https://jsfiddle.net/4xbg670q/

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

1 participant