Prevent the dragging of elements beyond the boundaries of the body

I am encountering an issue where a dragged element goes outside of the body. Is there a way to prevent this so that it stays inside the body?

    <div id="drag" style="background-color:red;">
        <fieldset>
            <h2 class="fs-title">Login</h2>
            <h3 class="fs-subtitle"></h3>

            <input name="UserName" type="text" placeholder="Username">
            <input name="Password" type="password" placeholder="Password">
            <input type="button" name="next" class="next action-button" value="New User" />

            <input type="submit" name="next" class="nexts action-login" value="Log in" />
        </fieldset>

    </div>
}

<script type="text/javascript">
    $(function () {
        $("#drag").draggable();
    });
</script>

    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
        @Scripts.Render("~/bundles/jqueryui")
    }

Answer №1

By using this code snippet, you can ensure that the element with the id of #drag remains within the boundaries of the body:

$("#drag").draggable({containment:'body'});

Answer №2

To restrict the draggable element, you can utilize the containment property:

$("#drag").draggable({ containment: "parent" });

For more information, check out:

http://api.jqueryui.com/draggable/#option-containment

Alternatively, if you prefer the draggable element to stay within the body:

 $("#drag").draggable({ containment: "body" });

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

Attempting to iterate through a JSON object containing nested objects and arrays of objects

For hours, I've been struggling to navigate through this json file with no success. When I log the data, it shows that Response is an Object, data is also an object, and saleItemCategories is an array containing four objects. The first object in the ...

Is there a way to activate all Bootstrap Popovers with a single click on a different button?

I am using Bootstrap Popover Buttons: <div class="bs-example tooltip-demo"> <div class="bs-example-tooltips"> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-co ...

Guide on triggering a button click event to display an alert message with jQuery

I'm having trouble getting the alert message to appear. The rest of my jQuery code is functioning properly, so I assume I linked the library correctly. Could the placement of the code in the document be causing the issue? Here's the HTML: <b ...

Continuously I am being informed that the value is null

Check out this code snippet: var Ribbon = /** @class */ (function () { function Ribbon(svg) { // Code here... } Ribbon.prototype.init = function() { // Initialization code here... }; Ribbon.prototype.updateR ...

What is preventing me from clicking on a link to access a file on an MVC web page?

I am encountering an issue with my simple MVC web page where a dialogue box pops up containing a list of hyperlinks to files. The links are prefixed with "file://" and work properly when pasted into a browser window, but clicking on them within the dialogu ...

Issues with Jquery/AJAX function not responding to onChange Event

I am currently working on a project where I need to populate a dropdown menu based on the value selected from another dropdown. However, I am encountering an issue with the function that I am trying to call in the onChange event of the select tag. This is ...

CSS for arranging products in varying sizes of divs to create a structured layout

Hey there! I'm looking to showcase my products in a similar layout as the one in this image. However, I'm struggling with figuring out how to apply different sizes to each div containing product information. Are there any CSS or jQuery plugins a ...

Enclose an image with a <div> element while maintaining the <div> height at

Encountering a challenge where positioning an element on top of an image at specific coordinates (20% from the top and 30% from the left) is required. Initially, the solution involved wrapping the image in a div with a relative position and using absolute ...

Finding an Element by its Class Name

Can someone assist me in selecting an element using its class name? I currently have GWT 2.0 and I am trying to accomplish this. Your help would be greatly appreciated. Thank you ...

Loading CSS definitions in a style tag may not be supported by certain mobile browsers

I have encountered a strange issue with my single-page responsive application that uses angularjs and php. I have embedded all my JavaScript and CSS codes within <script> and <style> tags respectively. While it works perfectly on desktop browse ...

Retrieve particular JSON information on a single webpage by selecting an element on a separate page

My goal is to fetch specific information from a JSON file and display it on different HTML pages by clicking a button. I will achieve this using jQuery and plain JS. For the first HTML page, I want to show all products from the JSON in an element with id= ...

The Swiper slider becomes stuck or bounces when attempting to click and drag on the slider simultaneously

I'm currently working on some code where I am facing an issue. When I try to drag the images in the slider, it activates the hyperlinks and navigates to the image link. In an ideal scenario, dragging should move the content within the slider, and clic ...

The loop in MVC is not functioning properly when dealing with various MapRoutes

I am new to MVC and have a good understanding of C#. While experimenting with MVC in Visual Studio, I encountered an issue that is puzzling me. I am struggling to identify the cause of this error. My goal is to print a variable n number of times. It works ...

Retrieve the value of an input text within a table data cell using JavaScript

I have set up a table using CGridView, which includes input text fields for user input. The problem I'm facing is that I can retrieve the text from table cells without input fields, but not from those containing input fields. PHP: <?php $this-> ...

Learning HTML and CSS integration through Codecademy is a fundamental part of the course

After following the instructions from an old HTML and CSS introduction on , I successfully created my first website. However, the code works perfectly on a special constructor page, but once I try to view it on a browser, the HTML and CSS don't seem t ...

Utilizing v-for and CSS Grid to showcase data effectively

I'm having trouble organizing my Vuex data with CSS GRID. It's turning out messy. My setup includes two columns: the first one for labels and the second for values. {{$store.state.stepOne.textfield[idx].label}} The code above is used to displa ...

Redirect visitors to specific webpage based on their stored cookie data

I am in the process of creating a website that will direct users to different locations based on their preferences. I have noticed other websites implementing a feature where they store user location choices and redirect them accordingly. Is using a cook ...

Clicking on elements within a Scrollview does not work when the Scrollview is set to an

Currently, I am facing an issue with my Scrollview as its children are not clickable despite having a position of absolute. Click events seem to just pass through them and interact with components below. I have searched extensively for a solution online, b ...

What is the best way to align the navigation list to the right in Bootstrap v4alpha6?

Recently, I discovered that with the alpha 6 version of bootstrap 4, they have made some changes to utilize flexbox which has caused some issues in my existing code from alpha 5. After checking out this fiddle, I attempted to use the flex justify content c ...

Accessing dynamic objects from a form to Ajax technology involves utilizing dynamic methodologies

Below is the JavaScript code I have written using Ajax: This code is designed to dynamically add options to any number of select elements when the function loadabc is called. function loadabc(vm) { var xmlhttp; if (window.XMLHttpRequest) ...