While holding down and moving one div, have another div seamlessly glide alongside it

I have a scenario where two divs are located in separate containers. My goal is to drag div2 in container2 while moving div1 in container1. The 'left' property for both divs should remain the same at all times.

I can currently drag each div individually using the 'draggable' function. Additionally, I am able to move div2 while dragging div1 by setting the left property of div2 equal to the left property of div1 when the 'draggable stop' function is triggered. However, this synchronization only occurs after the drag event ends.

Is there a method to ensure that div2 moves simultaneously with div1 throughout the drag process?

To better understand my objective, please refer to the following JSFiddle link: http://jsfiddle.net/37Wkd/16/

javascriptjquerycssjquery-uijquery-ui-draggable

Answer №1

$('#section1').draggable({
    direction: 'horizontal',
    container: '#containerBox',
    dragEvent: function(){
        $('#section2').css('leftPosition', $(this).position().left);  
    }

});​

Why isn't this functioning properly? Referencing the dragEvent: http://jqueryui.com/demos/draggable/

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

conceal the radio button element with dynamically generated content

Every time I click on a table cell, radio buttons pop up. However, if I then click on another cell to select an option, the radio button from the first cell also appears, which is not what I want. Can anyone point out where my mistake might be? Here is a ...

javascriptjqueryhtml

What is the method used to calculate the heights of flex items when the flex-direction property is set to column?

I'm currently grappling with the concept of flexbox layout and have been exploring the flex-direction: column option. HTML <div class="container"> <div class="item"> Lorem ipsum dolor sit amet consectetur a ...

htmlcssflexbox

The page is not responding after closing the modal dialog

My web application is built using Spring Boot for the backend and Thymeleaf for the front end. The app displays all available groups for users to review. When a user clicks on a group, the documents within that group are listed in a tabular form. Clicking ...

javascriptjqueryajaxspring-bootthymeleaf

Rotating 3D cube with CSS, adjusting height during transition

I'm attempting to create a basic 2-sided cube rotation. Following the rotation, my goal is to click on one of the sides and have its height increase. However, I've run into an issue where the transition occurs from the middle instead of from the ...

javascriptjquerycss

ASP view displaying overlapping controls

I currently have a form written in ASP that incorporates JQuery for handling two elements: an image upload and a datepicker. The code snippet responsible for the image upload functionality is $(function() { $("#wcpImage").makeAsyncUploader({ uplo ...

asp.nethtmlcss

Can you trigger the playback of a sound file by clicking on a specific URL?

Can a sound file be played when clicking depending on the URL? For example: url/sample/#1 Click to play sound1 url/sample/#3 Click to play sound2 ...

javascripthtmlaudio

determining the amount by which a div extends beyond the window's height

My challenge is to have a fixed div appear on top of various background images. The problem arises when this fixed div exceeds the height of the window, causing it not to scroll and resulting in lost content. I've attempted using max-height: 100% and ...

javascriptjquerycsshtmlheight

Error: Failed to retrieve the name property of an undefined value within the Array.forEach method

Upon pressing the button to display the task pane, I encountered an error message in the console window that reads: "Uncaught (in promise) TypeError: Cannot read property 'name' of undefined". This error persists and I am unable to resolve or com ...

javascripttypescriptoffice-jsoffice-addins

What are the steps for incorporating validation in bootstrap 4 css?

I came across this interesting example in the documentation for bootstrap 4: <div class="form-group has-success"> <label class="form-control-label" for="inputSuccess1">Input with success</label> <input type="text" class="form-co ...

cssbootstrap-4

Adding tags to a URL using jQuery without causing a page refresh

I am in the process of developing a "builder" page that allows users to choose an element from a dropdown menu and create a webpage. Since we don't have access to a database for this task, I want to save the elements in the URL so it can be shared via ...

jqueryhtmlfragment-identifier

The ordering of the arguments in an if statement

I'm struggling to wrap my head around the code that handles determining if the user is on the last image and presses the next button in my slider. When that happens, the slider is reset and the current image is set to the first image. Here's the ...

javascriptjqueryif-statementconventions

Adequate dynamic object arrangement

In my pursuit using JavaScript, I am striving to fit a group of objects of set sizes into a container with a specified horizontal width, all while preserving their approximate initial order. While whitespace is not a major concern, the goal is to keep it t ...

javascriptcsspackingtetris

The jQuery slideToggle() function causes motion

One of my web elements utilizes slideToggle to display/hide a table. This functionality is achieved using jQuery $("#featMoreInfo").click(function() { $("#featben2").slideToggle('slow'); var txt = $(this).text() == '+ More Info ...

jqueryhtmlcss

The most efficient method for loading RSS feeds using a combination of Ajax and server-side processing

When deciding on how to load and display a small RSS Feed on your homepage, would you opt for an Ajax (asynchronous) approach or something more server-side oriented (like using node.js)? I am aware of some of the advantages and disadvantages of each metho ...

javascriptajaxnode.jsoptimizationrss

What causes the other array to be affected when one is changed?

Take a look at this snippet of JavaScript code: var x = [1, 2, 3], y = x; y[1] = 3; x; // x === [1, 3, 3] Why does this happen? Why is the value of "x" changing when I update "y[1]"? I tried it in both Firefox and Chrome and got the same result. Th ...

javascriptarrays

Modifying the background color and linking it to a different class in Android Studio: A step-by-step guide

Recently, I developed a settings feature for my project that allows users to change the background color. However, I noticed that when I return to the home page, the settings are not saving or syncing properly. Any suggestions on how I can sync this info ...

javascriptjavaandroidclasscolors

disable td's from moving when hovered over

When you add a book, you will see the item added to the table with a cool font and an X icon for removal. However, I noticed that when hovering over the icon to increase its size, it slightly shifts the text in the other cells. Is there a way to prevent th ...

javascriptcsshtml-tablehyperlink

Customizing HTML Select Elements

Can the HTML Select attribute be customized to have a flatter appearance? Although I can set the border to be 1px solid, the dropdown part still appears 3D and unattractive. ...

htmlcss

unable to retrieve element values using class names

I have created multiple h1 elements with the same class names listed below. <h1 class="h1">One</h1> <h1 class="h1">Two</h1> <h1 class="h1">Three</h1> <h1 class="h1">Four</h1> I have also added a button that ...

javascripthtml

HTML element not refreshing properly following AJAX request

I have a script that adds and removes entries from a table by utilizing ajax to call a php script. However, instead of reloading the div containing the table upon success, it currently only clears the div. Below is the javascript code being used: $(docum ...

javascriptphpjqueryajax