jquery / jquery/jquery-ui

Issues with Sortable and Bootstrap 5 responsive

Open
#2,142 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Behavior shared with 1.12 Comp: Sortable
Dominant language
JavaScript
Stars
11.3k
Forks
5.2k
PR merge metrics
No merged PRs in 30d

Description

I know this component is pretty old, and I'm not sure to what extent it's still supported.

I'm trying to use it on a Boostrap 5 responsive page and am hitting the following issues.

  1. My list consists of a series of <div class="col-lg-6"> elements. So it shows two per row. But if I drag an element from the left side to the right-side element, nothing happens. In order to swap the two elements, I must also drag the element down. This is not intuitive. Is there a workaround?
  2. When I show it on a mobile device (only one element per row), no dragging or sorting whatsoever is visible.
  3. Despite explicitly setting scroll: true, no scrolling occurs if I drag an element to the bottom of the browser window. Are additional steps required.

Note: I tried created a CodePen to show all this but was unable to find a CDN for the sortable components. If someone knows how to do this, my CodePen is at https://codepen.io/softcircuits/pen/QWBWwwJ.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the three reported Sortable behaviors with the Bootstrap 5 responsive layout and the linked CodePen example. Compare desktop, mobile, and edge-of-window dragging, then document or fix the behavior so horizontal swapping, mobile sorting, and scrolling have clear working outcomes.

Written by the indexing model from the issue text.

Assessment

Tech stack
bootstrap, javascript, jquery
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.