jquery ui scroll containment

I am currently working on implementing a drag and drop feature using jQuery UI. In my setup, I have a container with position 'relative' and draggable elements inside it positioned as 'absolute'. My goal is to confine these draggable elements within the container while enabling scrolling beyond its boundaries. To achieve this, I initialized the draggable elements like so:

$(".draggable").draggable({
 containment:'parent',
 scroll:true
})

https://jsfiddle.net/zjncn6zy/1/

However, the behavior is not as expected. Removing the 'containment' option allows the draggables to auto-scroll, but they do so within the body rather than confined to the container.

What I am looking for is for the draggables to auto-scroll within the container as I drag them beyond its boundaries.

If anyone could offer some guidance or a solution to help me resolve this issue, I would greatly appreciate it. Thank you.

Answer №1

Consider applying the CSS property overflow: auto; to the container

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

Issue with jQuery Height setting in Chrome on initial page load

I've come across a peculiar issue solely in Chrome where the height is not properly being set upon page load when adjusted through jQuery. The height sets correctly when the browser is refreshed, but if you open a new tab or first visit the page, the ...

Replace the content of one div with different code using separate divs

When I click on my favorite button, I want the content of a div with the id "content" to change to display my favorite code with other divs. I'm not sure if I should use jQuery Ajax or something else. Here is my code, but I'm not sure how to ach ...

Is there a way to dynamically update one input field while another input field is being modified? [HTML / JS]

I have a form with 3 input fields. One of the inputs is disabled, while the other two are enabled. The goal is to combine the values entered in the enabled fields to populate the disabled field. How can this be achieved? Is it possible for the value in th ...

Looking to update the URLs in the text data to a different value

I am facing an issue with a list of links stored in a string. var data='<ol> <li><a href="#/getpage/getData/1">A Christmas Carol</a></li> <li><a href="#/getpage/getData/2">Copyright</a></li ...

What is causing my PHP array to fail to display as an array in JavaScript?

As a beginner in JavaScript coding, I am currently trying to query my MySQL database to retrieve disabled days for the date picker. Although I have made progress, I am facing an issue where only one set of values is being stored in the JavaScript variable ...

What is the best way to extend this dropdown menu to span the entire width of the page?

My Bootstrap 5 megamenu needs all the dropdown menus to span the entire page width and be in the same position, similar to this page. How can I make the dropdown menus larger? Which Bootstrap class should I modify? I've attempted to make changes, bu ...

Showing a notification that is persistent and not dismissible

Hello everyone! I've been struggling with a problem on the RPS project for quite some time now. The issue arises when I try to display a message for a tie in the game, but I can't seem to find a solution to make it disappear when the round is not ...

Guide on positioning an svg icon and text content in the same row to be right-aligned using Bootstrap

I have attempted to align the icon and text towards the right side, but unfortunately, it is not working as expected. I am attaching the design for reference. I have tried using the following code - please advise if there are any other options available. ...

Using AJAX to retrieve HTML elements may cause compatibility issues with Jquery

I am facing an issue with my unordered list implementation. Initially, the list is empty: <ul id="showlist"></ul> When the user triggers an AJAX function, the list gets populated like this: <ul> <li>a</li> <li> ...

Error: Issue with Tapestry and jQuery Integration

I encountered an issue while deploying my Tapestry application with JQuery integration. The error message I received is as follows: cat MPI-alertes.log [MPI_SYS] 2013-08-30 16:29:38,110 ERROR [org.apache.catalina.core.StandardContext :: filterStart] Excep ...

Customizing the jQuery Datepicker to only allow a predefined set of dates

I am looking for assistance regarding the jQuery datepicker. I have an array of dates and I need to disable all dates except for the ones in this specific array. Currently, the code I have does the opposite of what I need. I generate the array of dates in ...

What are the steps to adjust the width of an HTML table cell?

Here is the code snippet I am currently working with: $(document).ready(function () { $(".stripeMe tr").mouseover(function () { $(this).addClass("over"); }).mouseout(function () { $(this).removeClass("over"); }); $(".stripe ...

Tips for Properly Positioning Floating Pop-Up Messages Using CSS and jQuery

I was experimenting with adding a button that triggers a popup message to my website. I followed a coding tutorial using jQuery and CSS, which looks like this: Javascript : !function (v) { v.fn.floatingWhatsApp = function (e) {...} }(jQuery); CSS : .fl ...

Is it possible to animate the innerHTML of a div using CSS?

In my HTML file, I have these "cell" divs: <div data-spaces class="cell"></div> When clicked, the innerHTML of these divs changes dynamically from "" to "X". const gridSpaces = document.querySelectorAll("[data-spaces]"); f ...

Updating an SQL Database using JavaScript

I have been attempting to update my database using a JavaScript function. After researching online, I discovered that this cannot be done without utilizing AJAX. Since this is my first time trying, here is the JavaScript code I used: $("#update").click(f ...

What is the best way to resize a Drawable to fit the width of a TextView?

When trying to render HTML with image tags within a TextView, I encountered issues with scaling the images using the getDrawable() code. Here is an example snippet of the code: myTextView.setText(Html.fromHtml(htmlSource, this, this)); @Override public Dr ...

Ways to automatically close the dropdown button when the user clicks outside of it

Is there a way to automatically close the dropdown button when a user clicks outside of it? Check out this link for possible solutions ...

When using Ajax, it does not retrieve HTML data through the render_to_response function

I'm facing some confusion with my code. Take a look at the ajax snippet below: <script type="text/javascript"> jQuery(document).ready(function() { $("#search-filter").click(function (evt) { evt.preventDefault(); ...

Performing a Sitecore AJAX retrieval

Currently using Sitecore 7.0 for executing a GET request that retrieves a JSON result. Despite being able to view the JSON output, the response consists of HTML with the JSON content embedded within it. This leads me to believe there might be an issue with ...

Executing an ajax request in javascript in a synchronous manner?

I'm facing an issue with my code. I have a function that handles AJAX calls and sets up the interface, but this AJAX functionality is separated into a different function. The problem arises when I call this function within another function and then tr ...