Unable to resize static and draggable elements simultaneously

Observe this fiddle to see the demonstration: DEMO

If you are interested in the resizing of white divs, check out this link: Resizing of White divs

The draggable divs are represented by red while the static divs are shown in white and located in droppable fields.

The goal is to enable both draggable (red) and static (white) divs to resize simultaneously. However, I am encountering issues with achieving this functionality.

I have commented out the code responsible for resizing both the red (draggable) and static (white) fields within the document ready function. The problem lies in the fact that they do not work concurrently. Any assistance in resolving this issue would be greatly appreciated.

Jquery Code:

$(function () { 

    // Responsible for resizing the draggable elements (red)
    $('.resize_box').resizable({ handles:  'e' });

    // Responsible for resizing the static elements (white)
    $('.resize_box').resizable({
                handles: { 'e': '.ui-resizable-e' }
            });

    $(".selectorField").draggable({
                helper: "clone",
                stack: "div",
                cursor: "pointer",
                cancel: null
            });

            function makeDraggable($sel) {
                $sel.find('.resize_box').resizable({
                    handles: { 'e': '.ui-resizable-e' }
                });
            }

            $(".droppedFields").droppable({
                accept: ":not(.ui-sortable-helper)",
                drop: function (event, ui) {
                    var draggable = ui.draggable;
                    draggable = draggable.clone();
                    draggable.addClass('hers');

                    makeDraggable(draggable); //NEW
                    draggable.appendTo(this);
                    $(ui.draggable).hide();
                    alert("drop");


                    $(".droppedFields").sortable({
                        cancel: null, 
                        connectWith: ".droppedFields"
                    }).disableSelection();

                }
            });

        });

Answer №1

Ensuring that you have the correct selectors for jQuery UI resizable functions is crucial. After reviewing your jsFiddle, it is important to ensure that the JavaScript code only targets the RED divs and not both the RED and WHITE divs.

To address this issue, modify the 4th line of code as follows:

$('.maine .resize_box').resizable({ handles:  'e' });

For a visual example of the corrected code in action, visit: http://jsfiddle.net/abcd1234/99/

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

No longer able to bind events after making changes to SVG elements [using JSFiddle]

I've coded a personalized directive to display tags like `<rect>` and `<circle>` within `<svg>` elements. My shapes model is simply an array of objects with different attributes such as `width`, `height`, and `stroke-width. These s ...

Positioning two elements next to each other and keeping them aligned evenly

CSS - How to Float Two Elements Side by Side I am facing a similar challenge in achieving the layout I want. With a percentage-based layout, either my menu overlaps with the content or the content gets pushed below the menu when viewed on mobile devices. ...

What is the best way to maintain the same height for a textarea and input fields?

What is the best way to align the message input field with the name and phone input fields? I need the height of the message input field to match the combined height of the three inputs on the left. It's crucial that the borders line up perfectly. I ...

Executing an xajax/ javascript function simultaneously

Is there a way to simultaneously execute the same function? Here is an example: function convert_points() { show_loading(); xajax_ConvertPoints(); xajax_GetRegularGamingCards(); } When xajax_ConvertPoints is called, there seems to be a mill ...

The issue I am encountering is that the value from jQuery autocomplete is not getting transferred to the

I'm having trouble retrieving a textInput from a Form where I am extracting values from Jquery Autocomplete. The selected value is not being transferred to the form. Can you please help me identify what I am missing? $(function() { var availableT ...

What causes the index to display [object Object] rather than an integer in React?

It has been a long time since I last worked with React, and now I'm facing an issue. Whenever I use console.log to display the index within the map function, my console output looks like this: https://i.stack.imgur.com/VbGmE.png However, the result ...

Make sure the text fits perfectly without any extra spaces

When working with CSS/HTML, I noticed that using a simple text within a div without any margin or padding, and specifying a font-size of 36px with a line-height also set to 36px doesn't fit perfectly - there is always some spacing at the top of the li ...

Trouble with Facebox Dialog boxes: jQuery selectors altering input fields without any successfully triggering events

I am struggling to make a trigger like .change(), .click(), or .keydown() work on my facebox form in any browser. -- EDIT --- I discovered that the issue lies in the fact that facebox duplicates html to show it in the dialog box. Because of this, jquery ...

Utilizing Angular to efficiently download and showcase PDF files

Presently utilizing https://github.com/stranger82/angular-utf8-base64 as well as https://github.com/eligrey/FileSaver.js/ for the purpose of decoding a base64 encoded PDF file that I am fetching from a rest API. It successfully decodes and downloads, ...

Error in routing of submit button in Express.js

While attempting to create a basic "to-do list" using HTML requests, I encountered an issue with the PATCH request. Instead of redirecting to "/", it redirected to "/posts/2" and displayed the message "Cannot POST /posts/2", without updating the array elem ...

Crockford's system for safeguarded entities

Despite the abundance of questions and resources related to "Javascript: The Good Parts," I am struggling to comprehend a specific sentence in the book. On pages 41-42, the author defines the serial_maker function as follows: var serial_maker = function ( ...

How can one adhere to Angular's recommendation of "always using dots with ngModel" while working within isolate scopes?

Currently, I am working on developing an Angular application utilizing Bootstrap. To reduce the impact of Bootstrap on my HTML code, I have implemented two directives specifically for forms: form-control.js module.directive('formControl', func ...

What is the best way to include bootstrap using webpack?

I am currently building a webapp using Typescript and webpack. I have been able to successfully import some modules by including them in my webpack.config.js file as shown below. However, no matter how many times I attempt it, I cannot seem to import the b ...

Comparison of universal and descending selector in CSS

Can someone clarify when to use the universal selector versus the descendant selector in CSS? I've tried finding a clear explanation, but haven't come across one that explains the difference and when each should be used: div * .test{ color: re ...

A more efficient method for passing a function as an argument using the keyword "this"

When it comes to passing a function as an argument that uses the this keyword, is there a preferred method or correct way to do so? An example would be helpful in understanding this concept better: For instance, if I want to fade out an object and then r ...

Encountered a snag with submitting data via AJAX: received an error message stating

I created this custom script for a contact form on my website, and it seems to be working fine. However, I'm encountering an issue where instead of storing the data in my database, all I get is [object HTMLCollection]. Can someone please explain wh ...

Enhance the variety of types for an external module in TypeScript

I am in the process of migrating an existing codebase from a JavaScript/React/JSX setup to TypeScript. My plan is to tackle this task file by file, but I have a question regarding the best approach to make the TypeScript compiler work seamlessly with the e ...

Transforming data into JSON using jQuery through iteration

I'm looking to loop through a JSON object that doesn't have explicit keys for its child arrays. Although I can access them directly by providing the key name, I want the code to dynamically extrapolate and display these child elements of the arra ...

How can I use JavaScript to consistently fetch the CSS-defined percentage setting for padding/margin instead of the pixel size?

How can I retrieve the padding set in CSS for a div with {padding:10% 10px 20% 10px;} using JavaScript, considering that window.getComputedStyle(myelement).getPropertyValue('padding'); returns different results? In Firefox, it shows as "10% 10px ...

Tips for sequentially calling multiple await functions within a for loop in Node.js when one await is dependent on the data from another await

I am currently facing a challenge where I need to call multiple awaits within a for loop, which according to the documentation can be performance heavy. I was considering using promise.all() to optimize this process. However, the issue I'm encounterin ...