80627

Avoid jQuery UI resizable 'alsoResize' to move in opposite direction

In this plunk I have two divs, the orange div is resizable and has the option alsoResize to resize the blue div.

If you resize by dragging the right or bottom sides of the orange div, it works well. However, if you resize the top or left sides, the blue div is resized in the opposite direction. How to make the blue div resize in the same direction as the orange div?

HTML:

<div id="div1" style="width:100px;height:100px;background-color:orange;margin:30px;float:left"></div> <div id="div2" style="width:100px;height:100px;background-color:blue;margin:30px;float:left"></div>

Javascript:

$('#div1').resizable({ handles: 'all', alsoResize: '#div2' });

Answer1:

The alsoResize option only updates the width and height of the corresponding elements, however resizing from the north or west sides uses top and left, which alsoResize doesn't consider.

You can implement your own resize handler which you can use to copy the top and left difference across elements:

$('#div1').resizable({ handles: 'all', alsoResize: '#div2', start: function() { this.div2pos = $("#div2").offset(); }, resize: function(e, ui) { var left = ui.position.left - ui.originalPosition.left; var top = ui.position.top - ui.originalPosition.top; var pos = this.div2pos; $("#div2").offset({top: pos.top + top, left: pos.left + left}); } });

Beware, though: resize handlers are called continuously while dragging, and .offset is a rather heavy function. If the rest of your page is also heavy (or even if just the user's browser is slow), this can result in a choppy animation. You can improve this by switching to using .css({top:.. left:..}) but the exact implementation would depend on your actual use case.

Recommend

  • add/remove multiple input fields
  • Install different versions of nuget packages inside one solution file with two projects
  • ONLY Visible Div form elements will get submitted
  • $_POST for text in DIV elements
  • goJS dropdown remove items
  • Manually Timing out a C# Thread
  • Jenkins Grails plugin does not list lastest versions of Grails
  • blade.php method outputting it's result to the form
  • Remove changes from one element when event occurs on another element?
  • D3 get axis values on zoom event
  • How can I speed up CURL tasks?
  • Custom validator control occupying space even though display set to dynamic
  • How do I alternate colors in Flat List (React Native)
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Google Custom Search with transparent background
  • Android fill_parent issue
  • Change multiple background-images with jQuery
  • Algorithm for a smudge tool?
  • Repeat a vertical line on every page in Report Builder / SSRS
  • How reduce the height of an mschart by breaking up the y-axis
  • How to set/get protobuf's extension field in Go?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Change an a tag attribute in JavaScript based on screen width
  • How to show dropdown in excel using jrxml (jasper api)?
  • jquery mobile loadPage not working
  • Unanticipated behavior
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • How to stop GridView from loading again when I press back button?
  • Android Google Maps API OnLocationChanged only called once
  • python draw pie shapes with colour filled
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal