The JQuery UI draggable feature allows users to drag elements beyond the specified width limit

I am currently working with two draggable divs and I need to find a way to prevent them from being dragged to the right and down. Here is the CSS and JS code for each draggable div:

#the-sheet {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  border-radius: 25px;
  top: 200px;
  left: 250px;
  right: 250px;
  height: 400px;
  width: 1000px;
  background-color: #FFFAFA; 
  font-family: 'Open Sans', sans-serif;
  border: 1px solid red;  
}

#second-sheet {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 250px; 
  right: 250px;
  border-radius: 25px;
  top: 650px;
  height: 500px;
  width: 1000px;
  background-color: #FFFAFA; 
  font-family: 'Open Sans', sans-serif;
  border: 1px solid red;
}

and the js:

$('#the-sheet, #second-sheet').draggable( {
    appendTo: "body",
    scrollSpeed: 600,
    snap: false,
});

I am looking for a solution that will allow me to move these divs within limits but restrict dragging them to the right, avoiding expansion beyond the desired width.

javascriptjquerycssjquery-ui

Answer №1

To ensure that the draggable items stay within defined boundaries, you can utilize a wrapper element.

$('#the-sheet, #second-sheet').draggable( {
    appendTo: "body",
    scrollSpeed: 600,
    snap: false,
    containment: "#containment-wrapper"
});

Here's an example snippet showcasing this behavior -

$(document).ready(function() {
  $( ".box" ).draggable({ containment: "#containment-wrapper" })
})
.box{
  
    left:50px;
    top:50px;
    width: 150px;
    height: 150px;
    background: red
}

#containment-wrapper{
   width:300px;
   height:300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="containment-wrapper">
    <div class="box"></div>

</div>

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

Best practices for refreshing FullCalendar v4 after updating the events object using AJAX calls

Utilizing fullcalendar V4 to display events. The events load normally, but I am in need of adding a filter using multiple checkboxes and refreshing the fullcalendar events after a checkbox is changed with AJAX. After the change, I receive the new object e ...

javascriptjqueryajaxfullcalendarfullcalendar-4

Transform the MUI Typescript Autocomplete component to output singular values of a specific property rather than a complete object

When utilizing MUI Autocomplete, the generic value specified in onChange / value is determined by the interface of the object set in the options property. For instance, consider an autocomplete with the following setup: <Autocomplete options={top ...

javascriptreactjstypescriptmaterial-ui

Adjust the width of a div element automatically using CSS

I have a dropdown bar with various options that I want to display inline while ensuring they can scale to occupy the entire width of the div, allowing for multiple options per row. Below is a screenshot showing my current progress: https://i.sstatic.net/3 ...

javascripthtmlcss

Exploring cookies to extract and display my email using Express.js

I am currently working on retrieving the name and value fields as cookies through a loop in my app.get method, then posting the field values in the app.post method using expressjs. I would appreciate it if someone could review the 'for loop' bel ...

javascriptnode.jsexpress

Tips on deleting the lines following Texture Mapping

Why are there unwanted lines appearing on the sun sphere after applying texture mapping? I'm confused as to why these lines are showing up now. When we applied texture mapping in class, we didn't see these lines. Below is the code for the sun o ...

javascripthtmlthree.jswebgl

How do I redirect with a GET method after calling the *delete* method in Node / Express server?

As someone new to AJAX and Node, I encountered a dilemma that I hope to get some guidance on. Here's the issue: I have a DELETE ajax call that removes a row from the database and I want to redirect back to the same route with a GET method afterwards. ...

javascriptajaxnode.jsexpress

AngularJS - real-time validation using the $valid property

I have implemented AngularJS to handle form validation and submission. The submit button is configured as follows: <button type="submit" ng-disabled="btn" ng-click="submit(settings.$valid)" class="btn btn-primary"> Submit </button> The butt ...

javascriptangularjsformsvalidation

Best approach for retrieving and adding a large number of images when dealing with slower connections

Currently, I am retrieving 100-200 images using a combination of ajax-php-mongodb. The process involves ajax making an initial call with parameters, php on the server side locating the appropriate mongo document containing all image file ids in grid fs, fe ...

javascriptphpjqueryajaxmongodb

Why is this text appearing twice on my screen?

When I run the code in my React app and check the console in Chrome, I notice that the response.data[0] is being printed twice. What could be causing this duplication? const fetchData = async () => { return await axios.get(URL) .then((respon ...

javascriptreactjs

Regex can present two potential scenarios

I need to extract numbers from two different cases of a string. The first case is <@&!302050872383242240> And the second case is <@&302050872383242240> Is there a way to extract only the numbers from this string or remove the elemen ...

javascriptnode.jsregex

A fading transparency box on the border

Looking for a box with varying opacity from left to right (See image for reference - the red marked box has decreasing opacity from right to left). Here is my attempt: .waterMark { background-color: #FFFFFF; float: right; opacity: 0.6; position: ...

htmlcss

Tips for invoking a reduce mechanism within a separate function

I need assistance with implementing a reduce function: users.reduce(function (acc, obj) { return acc + obj.age/3; }, 0); within the following function structure: function calculateUserAverageAge(users) {}; To analyze this array of objects and calculate ...

javascriptarraysobjectreduce

Emulating Data in Angular 2 Using Configuration Similar to Ember Mirage

Is there a way to mock data through configuration in Angular 2 similar to how it's done in Ember Mirage? I'm aware that I can create my own solution using Dependency Injection and MockBackend to intercept HTTP calls and provide dummy data. Howeve ...

javascriptangularjsangular

How can one retrieve the ID value within a function using jQuery?

I am trying to implement an upload picture function along with cropper js function. However, I am facing an issue with displaying the file name even though I have declared the variable and set the input value. But when I attempt to pass and display the nam ...

javascripthtmljquery

Troubleshooting angular radio input display issue caused by controller updates

When the page loads, my AngularJS controller.js initializes the scope model by fetching data from an AJAX response: services.InitializePage().then(function (response) { $scope.DataModel = response.data; Shortly after that, the model undergoes ...

javascriptangularjs

Exploring Sprite Range with Raycasting in Three.js

I am working on a 3D scene using three.js and adding sprites, but I want to accurately determine the distance between the camera and a sprite when I click on the screen. To achieve this, I am utilizing a Raycaster. However, when clicking on the sprite, th ...

javascriptthree.js

Steps to combine multiple arrays into a unified array:1. Begin by allocating a

To form a league table, I have multiple individual arrays filled with data. In order to sort them by points, I want to merge these arrays into a single array called "teams". However, I am unsure if there is a function available to achieve this specific f ...

javascript

A complete guide on executing synchronous HTTP requests while using async.each in Node.js

My goal is to send HTTP requests to APIs, retrieve data for each user, and then insert that data into MongoDB. The issue I'm facing is that all the requests are being made simultaneously, causing the process to get stuck at some point. I'm using ...

javascriptnode.jsasynchronous

Fresh Redux shop in stealth mode

I am managing a Single Page Application using React and Redux. Some customers have expressed interest in keeping two separate instances open with distinct credentials (one in normal view and one in incognito mode on Chrome). As both instances can access t ...

javascriptreactjsgoogle-chromereduxincognito-mode

Strategies for managing asynchronous forEach loops, inserting outcomes into a database, and displaying the finalized dataset

I want to achieve the following steps: Call an API resource Receive an array of records - [arr] Iterate over [arr] and execute a function which involves making another async call to an API for each item Create an object for each iteration that includes el ...

javascriptnode.jsmongodbexpress