Changing the position of sortable divs dynamically with Jquery

Is there a way to dynamically change the position of sortable divs at runtime? Below is my HTML code:

<div id="sortable2" class="connectedSortable">
    <div id="div1" class="ui-state-highlight">Item 1</div>
    <div id="div2" class="ui-state-highlight">Item 2</div>
</div>

And here is my jQuery code:

<script type="text/javascript">
        $(document).ready(function () {

            $("#div2").css({
                left: 701.33334350585937,
                top: 6.3333358764648437
            });

            $("#div1").css({
                left: 701.33334350585937,
                top: 50.3333358764648437
            });

            $("#div1").collapsible = true;

            $("#sortable2").css({
                height: 'auto'
            });
        });

However, when I set the position of the divs and use the absolute positioning property, the height of the 'sortable' div does not adjust accordingly. Additionally, I am unable to change the position of the divs through drag and drop. Can someone assist me in resolving this issue caused by absolute positioning?

Thank you in advance.

Answer №1

If you're looking to change the positioning of your div elements, utilizing jquery can easily achieve that goal with the following code snippet.

<script type="text/javascript>
    $(document).ready(function () {
        $('#sortable2').sortable()
    }
</script>

Don't forget to include jquery ui in your HTML page as well.

To download jquery ui, visit: http://jqueryui.com/download/

For detailed documentation on how to use .sortable(), check out: http://jqueryui.com/sortable/

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

Use jquery or javascript to align a button to the center

Can the vote button be centered in the script below? <script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/6352993.js"></script> <noscript><a href="http://polldaddy.com/poll/6352993/">This is a le ...

Having trouble displaying the cover image properly on mobile devices using Bootstrap/MDBootstrap, facing issues with the live server as well

My project includes a cover image in .jpg format that displays perfectly on desktop, but is invisible on mobile devices. When viewed through Live Server on Vscode, the image appears at all sizes including mobile, but when hosted on Netlify and accessed fro ...

resizing videos in wordpress

Similar Question: How to Resize Embedded Videos Using PHP I am looking to adjust the dimensions of videos to be 280 pixels in height and 520 pixels in width on my WordPress homepage. Currently, the code is using the original YouTube dimensions: ...

"Exploring the process of transferring a URL from a PHP script to a JavaScript file

php code snippet <?php function myfunc() { //write your code here } ?> <script> var url = "ajaxc-alling-file.php"; </script> <script src="custom.js"></script> javascript code s ...

Creating a Framework for CSS Project-Wide Variables

Having experience in mobile development, I am accustomed to using a shared stylesheet that sets the basic styles for the entire project. In Flutter, this would be translated into CSS as follows: :root { // Setting spacing values sizeSm: 8px; // or ...

Static Camera Three.js Video Background Exploration

I'm currently working on a webpage that combines a video background with an interactive WebGL element in the foreground. The concept is to have a stationary camera while a 3D object moves in the foreground. I followed a CSS video background tutorial, ...

Issues with Datatables.net: JSON data not loading into table

Currently, I am integrating a Datatables.Net plugin into our internal web application at my company. The issue that I'm encountering involves the JSON variable. Although the JSON response appears to be valid according to JSONLint, I am unable to extr ...

Tips for aligning website content (including the body and navigation bar) at the center in rtd sphinx

Trying to create documentation with the Read the Docs theme for Sphinx documentation. Want to center the entire webpage, including both the body and left navigation bar so that as the window width increases, the margins on both sides increase equally. Righ ...

Revise Panel timer management with the power of JQuery

Within our Update Panel, we have a variety of controls such as HTML divs, tables, and grids. We also utilize an AsyncPostBackTrigger with the Tick event of a timer control, which updates the panel at specified intervals. Some controls are loaded using JQue ...

Leveraging aws-sdk within a TypeScript, jQuery, and webpack application

Greetings! I have a TypeScript/jQuery/Webpack application with all the latest releases, and everything seems to be functioning properly. Now, I am attempting to integrate the aws-sdk into it. I followed the same approach I used for importing other librarie ...

It displays empty squares instead of icons

Currently, I am working on a form using Bootstrap and HTML. I have incorporated glyphicons into the design but unfortunately they do not seem to be functioning properly. <label>International Collaboration &nbsp;<span class="glyphicon glyphico ...

Employing JavaScript for fading divs in and out sequentially

Hey there! I'm currently struggling with implementing transitions for my tool tips. Any assistance would be greatly appreciated! I am looking to have my "fader" divs fade in and out on click of a button, with each transition lasting 5 seconds. It&apo ...

Elements not following percentage in top positioning

I am facing an issue with resizing containers on my webpage. Despite using position: relative for everything, I am unable to properly adjust the size of the top containers using percentages. Any assistance would be greatly appreciated! ...

Is there a way to restrict the types of messages that users can set in Node.js?

I recently started developing a multiplayer game and made the decision to incorporate NodeJS into the system. NodeJS is connected to my C# game emulator via TCP. My current challenge is figuring out how to send messages to specific user IDs. Each user in ...

Centering dilemma in the div

I have a main container with a width of 940 pixels. Inside the main container, there are two divs with a width of 250px each. My goal is to center align these boxes within the main container. However, the issue arises when the second div is added dynamic ...

Confusion with PHP Array Functions within a Class

Currently, I am delving into the JQuery File Upload Plugin's existing codebase. Within a rather extensive class, there are specific functions that I am attempting to tailor to my needs. However, there are several lines of code that leave me completely ...

The quantity of elements stays constant even after adding to them using Javascript

I have implemented a notes list feature that allows users to add notes using an input field. Beneath the notes list ul, there is a message showing the total number of notes: $('li').length. However, I encountered an issue where the count of not ...

Loading WordPress posts using Ajax

Struggling with getting an Ajax post loader to work properly. Following the jQuery code from a previous StackOverflow post titled "Load More Posts" with Ajax in WordPress, but still facing issues. Trying to implement an isotope list for ajax loading more p ...

The concept of CSS div wrapping and managing vertical whitespace in web design

My goal is to make multiple div elements wrap to the next line when the width of their container is changed. The wrapping part is working fine, as the boxes drop to the next line when there isn't enough width for them to fit. However, I am facing an i ...

Integrate a variable called "counter" with the jQuery ID

I currently have the following code, which is functioning well. $('.clickable').click(function(e){ e.preventDefault(); $('#toggle').slideToggle(); }); $('.clickable1').click(function(e){ e.preventDefault(); $('# ...