SortableJS/Sortable

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

Open

#1,853 创建于 2020年6月16日

在 GitHub 查看
 (9 评论) (0 反应) (0 负责人)JavaScript (30,389 star) (3,731 fork)batch import
bughelp wanted

描述

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

贡献者指南

技术栈
javascript
领域
frontend
议题类型
bug
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
3
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
1-3 hours
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
stale
清晰度议题是否清楚说明期望改动、验收标准和下一步。
mostly clear
前置要求
Understand SortableJS drag and drop eventsBasic knowledge of CSS display: contents and grid layout
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
30
研究方向
Investigate the bug using the provided CodePen reproduction. Focus on the direction detection algorithm in Sortable.js, specifically how it handles containers with `display: contents` inside a grid. Look at the ` nextTick` and ` onMove` functions to understand how elements are positioned. Check if the issue arises from the fact that `display: contents` elements are not rendered as boxes, causing getBoundingClientRect to return zero dimensions, and how that affects the direction calculation. The maintainer's comments might provide hints for a fix. Consider testing with a simplified HTML structure to isolate the problem.