search

adopted-ember-addons / ember-sortable

Sortable UI primitives for Ember.js
https://ember-sortable.netlify.app/
MIT License
298 stars 148 forks source link

`align-items: baseline` causes odd behaviour #574

Open evoactivity opened 3 months ago

evoactivity commented 3 months ago

Describe the bug When a sortable list has align-items: baseline as part of it's CSS, items jump to a different position when dragging begins and jump back when dragging ends.

Also I am seeing behaviour where an item is moved to the beginning of the row when it wasn't interacted with.

To Reproduce

Create a sortable flex list in a grid with align-items: baseline

Expected behavior Items should remain in their rendered position and move predictably.

Screenshots

https://github.com/user-attachments/assets/a3987c1b-d3b3-4b5c-86d8-12f99439e941

evoactivity commented 3 months ago

Seems similar to https://github.com/adopted-ember-addons/ember-sortable/issues/520

toreric commented 3 months ago

Description Another similar problem within a flex block where justify-content:center is prescribed: Apparenlty, justify-content:left takes effect immediately when a drag is started, making the items flip away unexpectedly. Depending of the actual item population, you can perhaps complete the drag-drop within the 'new screen'. The screen reverts as soon as the mouse is released.

To Reproduce Arrange enough many items within a direction='grid'-and-justify-content:center-element with also display:flex;flex-wrap:wrap.

PS If the items are a hundred thumbnails and a drag is started, all except the dragged one flip off-screen. Added: This appears apparently only when more than one component utilizes ember-sortable simultaneously, should simultaneous use be avoided?