Troubleshooting compatibility problems between jQuery UI Sortable and a responsive Bootstrap 5 page

Has anyone had experience using the jQuery UI Sortable widget on a Bootstrap 5 responsive page?

My page consists of 

<div class="col-lg-6">
elements, displaying two per row.

Although the sorting functionality works, I've encountered the following issues:

  1. When dragging an item from the left to the right, it only swaps positions when also dragging it downward.
  2. In a mobile layout with one item per row, dragging and sorting does not work at all.

I attempted to create a CodePen demonstration, but faced difficulties finding a CDN with the necessary jQuery UI components. If anyone has information on where to find them, please let me know. The CodePen link is available at https://codepen.io/softcircuits/pen/QWBWwwJ.

csstwitter-bootstrapjquery-uibootstrap-5jquery-ui-sortable

Answer №1

  1. By adjusting the tolerance: 'pointer' option, the issue seems to be resolved.
  2. It seems like the problem is related to the detection of touch events instead of mouse events, which is not supported by jQuery UI. Refer to this question for more information.

Additionally, I encountered a problem with scrolling, which was caused by the <body> element having a overflow-x: hidden style.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS class for modifying color based on certain conditions

Suppose I have this CSS code: label { color: #AAAAAA; } Can I modify it to include a condition that changes the color to red if the label has the "error" class? I am aware that I can dynamically add the class to the label in HTML, but I am curious if ...

htmlcss

Create a visually appealing Zoom Effect with CSS while ensuring the div size remains constant

Update: What should I do if the width size is unknown? Check out the demo on JS Fiddle If you visit the provided link, I am trying to achieve a zoom effect where only the image inside the div zooms, not the entire div itself. However, I seem to be missin ...

htmlcss

Invoke the public methods of a jQueryUI Widget by passing parameters

Currently, I am utilizing jQuery UI widget factories and am facing a challenge when it comes to calling public methods with parameters. This is the code snippet I have implemented: //Widget $.widget('ui.MyWidget',{ public_method_without_param ...

jqueryjquery-uijquery-plugins

Ways to modify CSS using JavaScript

Can anyone assist me with a custom CSS code that I found? It looks like this: header.type-2:not(.fixed-header) nav>ul>li>a{ color:#000; } I've been trying to change the color to #fff using JavaScript, but haven't had any success yet. ...

javascripthtmlcss

Properly arrange the positioning of floating HTML elements

I am currently using the float property to structure the layout. <style> div { float: left; } .pro { width : 100px; color : blue; } </style> <span> <div class="pro">Long property name : </div> <div>value&l ...

htmlcsslayoutcss-float

Trouble with Unveiling the Secondary Accordion

I am having issues adding a second accordion next to the existing one. Even though the code is working fine in the tryit editor v3.6 online, it doesn't seem to display correctly for me. I have made sure that I am using the latest versions of all scrip ...

htmlcssbootstrap-4

Issue with iOS 10: Changes to class not reflected in CSS/styles

Currently, I am utilizing Ionic with Angular to develop an application for Android and iOS. Surprisingly, everything functions smoothly on Android, but there seems to be an issue with iOS. I am employing a class change on an element using ng-class. I can ...

ioscssangulartypescriptionic-framework

Implementing a Dynamic Navigation Feature using PHP in a Standalone File

I am currently working on creating a dynamic PHP navigation system that should highlight the active tab, but I'm facing challenges with making the active tab part function properly. While there are simpler methods available, they all involve incorpora ...

phphtmlcss

Discovering multiple classes in a CSS file can be achieved by using specific selectors and searching

I am attempting to phrase my question differently: As mentioned in a book: "multiple classes: p.testorosso.grassetto {color: red; font-weight: bold;} This rule will apply the specified styles to all elements that contain the names of the defined classes ...

css

Tips on how to pass properties as arguments to mixins

Here is the code I have: mox(first, second) {first} second a mox(transition, 0.3s linear all) I want to call the mixin like this: mox(transition 0.3s linear all) If we modify mox, it would look like this: mox() arguments a mox transition 0.3 ...

cssnode.jsstylus

Issues arise when attempting to determine the accurate dimensions of a canvas

Looking at my canvas element: <canvas id='arena'></canvas> This Element is set to fill the entire website window. It's contained within a div Element, both of which are set to 100% size. I attempted running this script: var c ...

javascripthtmlcsscanvaselement

Is there a way to include a button at the top of the Notiflix.Loading() overlay for closing or stopping it?

I've integrated the "notiflix" library into my project, and I'm currently using notiflix.loading.pulse() for a lengthy process. While this works perfectly fine, I would like to add a button (for closing/stopping the process) on top of the loading ...

javascripthtmlcssnpm

Using Jquery to bind events for selecting focus in and out

There seems to be an issue with binding jQuery events to a select element. The desired behavior is for the .focus class to be added when the select is clicked. However, the logic breaks when an option is selected from the dropdown. See it in action here: ...

cssfocusjquery

Tips for personalizing the sidebar on your WordPress site and incorporating a collapsible menu feature

Is there a way to customize the sidebar in WordPress so that all the categories and their children are easily accessible? For example, on https://www.w3schools.com, clicking on the header category "HTML" displays all related links in the left sidebar. I&a ...

htmlcsswordpresstagscategories

Simple Method To Dynamically Align jQuery LightGallery Thumbnails On a Responsive CSS Website

Can anyone assist me quickly? I've implemented everything but am facing a slight issue with the centering of my ul code. I've tried various solutions without success. Here is my code, any advice would be greatly appreciated (I may sound stressed ...

jquerycssgallerythumbnailscenter

Determine the present vertical measurement of the video

I am having trouble determining the actual height of a video element. Despite seeing in the developer tools that it is 384px, I am only able to retrieve a height of 342px. I attempted the following code snippet, but it only gives me the natural height, no ...

javascriptjqueryhtmlcsshtml5-video

Error in Formatting Labels in CSS

I currently have a form with textboxes that include validation. Everything works smoothly when clicking the save button for the first time, but if we fill out the textboxes and then remove the text, an error message is displayed on the textboxes. You can v ...

javascriptcss

What is the best way to remove the hover effect from a specific element within a div?

I am looking to achieve a specific hover effect where the white part does not darken when hovering over a certain element within its child elements. Here is the HTML code I have: <div className= {css.searchBarDiv}> <div className={css.searchBar ...

javascripthtmlcssreactjs

Turn an entire div into a clickable element with a functional :active CSS rule that is compatible with IE10

I am currently working on designing a clickable panel for an html app that will include multiple text elements and images. Based on my understanding, this is typically achieved using a div. An example of this would be: <div class="myButton"> &l ...

htmlcssinternet-explorer-10

Conceal the slider thumb within the material-ui framework

I've been attempting to conceal the slide thumb, initially without using a library. However, I started considering utilizing material-ui as it might make the process easier. Hence, I'm seeking assistance here. Below is my code snippet: import * ...

javascriptcssmaterial-uislider