jquery-ui icon indicating copy to clipboard operation
jquery-ui copied to clipboard

Published 20 hours ago • verified publisher icon jquery

Issues with Sortable and Bootstrap 5 responsive

Open SoftCircuits opened this issue 2 years ago • 3 comments
trafficstars

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.

SoftCircuits avatar Dec 18 '22 19:12 SoftCircuits

Thanks for the report. Does the issue you describe exist when jQuery UI 1.12.1 is used or only with jQuery UI 1.13.0 or newer?

mgol avatar Dec 19 '22 15:12 mgol

@mgol I have no idea. To be honest, it took me some time to figure out which files I needed as the download feature on the jQuery UI website downloads a boatload of files. I have no reason to assume this is new to 1.13.0. (I'm using 1.13.2.)

If you can reference an online version of the files I needed, I'd be happy to update my CodePen and you could see it firsthand.

SoftCircuits avatar Dec 19 '22 17:12 SoftCircuits

The jQuery UI minified file contains all the widgets so it also includes Sortable. Your codepen doesn't include jQuery, though, which is why it doesn't work. It looks like the issue is in jQuery UI 1.12.1 as well: https://codepen.io/mgol/pen/yLqLEKg

Since the issue is already in 1.12, given limited team resources it's not likely to be fixed by the UI team; see the project status at https://blog.jqueryui.com/2021/10/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/. PRs are welcome if they're not too complex.

mgol avatar Dec 19 '22 21:12 mgol