search

jquery / jquery-ui

The official jQuery user interface library.
https://jqueryui.com
Other
11.26k stars 5.33k forks source link

Issues with Sortable and Bootstrap 5 responsive #2142

Open SoftCircuits opened 1 year ago

SoftCircuits commented 1 year ago

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.

mgol commented 1 year ago

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?

SoftCircuits commented 1 year ago

@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.

mgol commented 1 year ago

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.