I’m using Jquery Draggable Collision (found here) and I am trying to resize the draggable area (blue square, in my JSFiddle) via a simple toggleClass() right now.
Once it animates(gets bigger due to toggleclass link), I would like to measure the protrusion/collision data and subtract that from the height/width of the surrounding objects.
If debugging is turned on for the plugin, it will show you that it does collect protrusion/collision data, but I’m stumped on how to use it to “shrink” the red objects while the blue object gets bigger.
This JSfiddle will make more sense of my question.
JSFiddle: http://jsfiddle.net/jVABm/
And another example of what I am looking to do: http://www.adidas.com/us/homepage.asp
Any help is GREATLY appreciated. I am unsure how or if I can, but I would be willing to put up a bounty for help.
UPDATE: http://jsfiddle.net/tmort/hCw2A/ – I’ve written the code out to dynamically resize the boxes according to height. I’m now working on the following issues:
-
Measuring the width and applying the same effect does not work.
-
Height does not work if boxes are next to one another.
-
I want to apply the Isotope script to the resizing script I’ve written.
Check out jquery Masonry http://masonry.desandro.com/
and this: jquery Masonry, add a new div in the center of the div#container
it isn’t exactly what you need but it can be helpful