Getting the Protrusion and Collision Data From Jqu

问题:

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:

1. Measuring the width and applying the same effect does not work.

2. Height does not work if boxes are next to one another.

3. I want to apply the Isotope script to the resizing script I've written.

回答1:

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

回答2:

Sorry, this was never designed with resizing in mind. It's on the infinite queue of things to do for the future. If you need a workaround, there's one here:

Odd behavour with using jQuery draggable AND resizable with jquery collision 1.0.1