SortableJS/Sortable

[bug] Sortable applied on a css display: contents container behave erratically in certain scenarios

Open

#1 853 ouverte le 16 juin 2020

Voir sur GitHub
 (9 commentaires) (0 réactions) (0 assignés)JavaScript (3 731 forks)batch import
bughelp wanted

Métriques du dépôt

Stars
 (30 389 stars)
Métriques de merge PR
 (Aucune PR mergée en 30 j)

Description

If you use sortable on a display: contents inside a display: grid and the rows are incomplete, moving from the first half of a top row will place the element at the end of the grid.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://codepen.io/cronco/pen/KKVzVLg
  2. Drag the first element to the right.
  3. After dragging over the 3rd element you should see it replacing it.
  4. Actually see the element get positioned at the end of the

Expected behavior

The first element should be placed as the third element, but instead it is the last one.

Information

Manually setting direction: horizontal OR applying the sortable directly to the display: grid container and skipping the display: contents intermediary element seems to fix it (that is not an option for my use case). My intuition is that the direction setting algorithm is somehow confused by the behaviour of display: contents.

This is a highly specific bug, so I understand if it gets marked as won't fix.

Versions - Look in your package.json for this information: sortablejs = ^1.10.2 @types/sortablejs = ^x.x.x

Additional context Add any other context about the problem here.

Reproduction codesandbox: https://codepen.io/cronco/pen/KKVzVLg

Guide contributeur