Search code examples
csstwitter-bootstrapjquery-uibootstrap-5jquery-ui-sortable

Issues using jQuery UI Sortable with Bootstrap 5 responsive page

Has anyone used the jQuery UI Sortable widget on a Bootstrap 5 responsive page?

My page has a series of <div class="col-lg-6"> elements, so it shows two per row.

The sorting works. But I have the following issues:

  1. If I drag an item on the left over to the item on the right, nothing happens. It only swaps the two items if I also drag it down.
  2. If I use a mobile device layout (1 item per row), nothing drags or sorts at all.

I created a CodePen for this but I was unable to find a CDN with the appropriate jQuery UI components. If anyone knows where those are, I can add them. My CodePen is at https://codepen.io/softcircuits/pen/QWBWwwJ.

Solution
    1. This seems to be working after setting the tolerance: 'pointer' option.
    2. This appears related to the detection of touch events (vs mouse events), which jQuery UI doesn't support. See this question.

    Also, scroll wasn't working for me. This was due to the <body> having a overflow-x: hidden style.