Enhance the functionality of jQueryUI sortable by enabling scrolling and incorporating a delay specifically for mobile

I have an inline thumbnail gallery that can be sorted using jQueryUI and the touch punch plugin for mobile devices.

Everything is functioning correctly, except on mobile devices with a large number of images. I am unable to scroll down the screen to view more images because the sorting functionality takes over.

Is it possible to add a 2-second delay to the sortable items? This way, users would need to touch and hold the items for them to become active before being able to move them. Additionally, I would like to enable scrolling over the thumbnail gallery once the delay has been triggered to allow users to navigate through the list of images.

Here is my code:

      $(function() {
        $( "#sortable" ).sortable({
          delay: 900,
          scroll: true,
          placeholder: "ui-state-highlight"
        });
        $( "#sortable" ).disableSelection();
      });

The delay function works, but I still cannot scroll down the list of images without rearranging their order.

Any help would be greatly appreciated.

Thank you!

Answer №2

delay: interval

replace 'interval' with the specific duration you want before dragging initiates

incorporate this into your sortable configuration

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

The division is now appearing below the preceding division instead of following it

I am currently encountering an issue that I believe has a simple solution, but I am unable to find it. I have two divs in my code. The first div contains a blurred background image and content, which is working perfectly fine. However, the second div is n ...

Attempting to achieve the desired grid layout with Bootstrap 4

Need help achieving this Grid layout Hello, I am new to Bootstrap 4 and I am trying to achieve the layout shown in the image linked above. Here is what I have tried so far... <div class="container"> <div class="row"> <div class="col-md-4 ...

What could be causing textbox2's value to not update when textbox1's value is changed? (Novice)

I am looking to create an interactive form with two textboxes and a checkbox. When the checkbox is checked, I want the value of textbox2 to mirror whatever is typed into textbox1. Is there a way to have the value of textbox2 automatically updated when the ...

The website lacks accessibility features such as a text size swapper, but the contrast swapper is not functioning properly

As I embark on my first website project that requires accessibility controls, I find myself in need of the ability to adjust text size and contrast settings. Specifically, I want to offer options for small, default, and large text sizes as well as normal, ...

Unable to access URL through AppGyver's rootview

As per the information provided in their guide: All location attributes can be either Supersonic routes or URLs. After adding the code to my structure.coffee file, only the initial splash screen appears and nothing else loads: rootView: location ...

Conceal the div element if the screen size drops below a certain threshold

Is it possible to hide a div element when the browser width is less than or equal to 1026px using CSS, like this: @media only screen and (min-width: 1140px) {}? If not, what are some alternative solutions? Additional information: When hiding the div eleme ...

Requesting data from server using Ajax with multiple JSON responses

I'm facing a situation where my Ajax script calls a PHP file to make a query to MySQL and then formats the response in JSON. The challenge is that I need to retrieve data from different tables based on the id sent with the Ajax call. Some tables retur ...

A guide to placing tooltips dynamically in highcharts column charts

I am encountering an issue with tooltips in Highcharts column charts. The problem arises when the series fill up my chart, causing the tooltip to be hidden below the series and cut off by the end of the div. You can see an example here: https://i.stack.i ...

There seems to be a connection issue between my Jquery and HTML, as they

I've hit a roadblock because my jQuery isn't connecting and I can't seem to figure out why. It's been stumping me for hours. Here is the HTML code snippet from exercise6.html: <!DOCTYPE html> <html lang="en> <h ...

The form transmits the URL parameter rather than executing an update

I'm having trouble with my code and can't seem to figure out why it's behaving this way. When I try to update a recordset, the page reloads upon hitting the submit button and multiple URL parameters appear in the address bar. There are two ...

Learn how to troubleshoot and resolve a bug in the mobile Chrome browser that pertains to the position fixed feature

On the mobile version of Firefox, everything works perfectly. However, there seems to be a bug in Chrome with the fixed positioning. When scrolling, the header should change from absolute to fixed and the height should go from 65 to 35 pixels. Unfortunatel ...

Obtaining exchange rate data in JSON format from fixer.io and displaying it in

Looking to extract the current USD to EUR exchange rate from fixer.io and display it as a single line in an HTML file, with the USD value represented using commas instead of periods. Any assistance would be greatly appreciated! Find the link here: { ...

What could be preventing my state from changing to false when I click the close button on the menu?

Despite initializing my state to false, the problem arises when I open and close my menu. The state never actually becomes false, causing the closing animation of the NavBar to not run as expected. The component: import CloseButton from "./CloseButto ...

Numerous operations included in a JavaScript document

Looking to enhance my JS file by adding multiple functions, but I'm having trouble as I'm not very familiar with JavaScript. Here's what I've got so far. $(function(){ $('.incentives').hide(); $('.incentives-click&a ...

Regular expression for matching a CSS definition that includes a specific name and value

Looking to match all CSS definitions with the name "test" and color set to gray? Here are a few examples: a.test { color: grey; } or .test { color: grey; }, as well as a.test:after, a.test { font-size: 10px; color: gray; } It's important to consider ...

Practical Guide to Implementing Ajax and JSON Encoding in Zend Framework 2

Having an issue with a simple ajax application using jQuery where every data object is returning as null. Can someone assist me in resolving this? protected $mysqlAdapter; protected $studentid; protected $fullname; protected $birthdate; protected $placebi ...

Using AngularJS to execute jQuery code after the page has finished loading

I have a carousel of images on my website: Here is the code I am using: <div id="carousel"> <ul class="bjqs"> <li ng-repeat="image in dealer.images"><img src="{{image}}" alt="{{image}}" /></li> </ul& ...

Trouble with Bootstrap 5 Padding Distorting the Aspect Ratio of Image Collection

I am struggling to manage three images in a layout where they span one row and two columns (please refer to the image). While I can make it look perfect at one screen resolution, the ratio of the images becomes distorted when viewed in other screen sizes d ...

Avoiding the collapse of the Bootstrap 4 navbar

Having trouble with the navbar collapsing on itself? The issue seems to occur around 1280px window size, but works fine when the window is wider or narrower. https://www.bootply.com/AcsaaqReAL .navbar-custom { background-color: #333333; border- ...

problem with the height of the side navigation bar

Currently, I am in the process of creating a back-end system that includes a side navigation bar positioned on the left-hand side. To accomplish this, I have opted to utilize the Bulma CSS framework and integrate it with Laravel. Although I have implemen ...