Is there a ready solution for js to expansion and collisions of the content inside the block?

It is doubtful that this css is possible, but you never know. The point is, that when clicking in a particular block inside of which there are still various units, they all started to fly inside it and Bang on the boundary, to encounter each other. Are there any ready-made solutions of this kind?

UPD: a Little reflection on this question in mind there are a couple of ideas from which is repelled. The main is to determine the position of each of the elements in the block and set it with an absolute position. Accordingly then have to change its position randomly in a certain direction (here the question arises how to create this area, I can not use the degree axis. Accordingly, the need to write a formula for the type of 1px and left 1px top in the interval for the first element, that's kind of like the equivalent of -45 degrees relative to the vertical axis, and so alternately for all elements but in other directions. The question then arises of changing direction when colliding with the borders. In fact, I can just change direction by 90 degrees by the same method, changing the parties themselves, but how to determine which side you need to make a change. Ie I want it to determine what angle I was faced with a certain edge. Well, everything else to spend all the same and in relation to the collision between objects. But then I have no ideas how the "zones" issue).

Can who faced?
June 3rd 19 at 19:19
1 answer
June 3rd 19 at 19:21
Solution
Is box2d-js box2d-js.sourceforge.net/index2.html
matter-js brm.io/matter-js
other https://www.google.com/search?q=js+physics+animation

If not polygons, and particles, everything easier and faster: https://vincentgarreau.com/particles.js/
(Google "js particles")
But it's all canvas. With him I know how to do it. I probably not clearly formulated. I have a complete dom tree and in one of the div blocks are the other div containing images, texts. Need to manipulate them. - shane.Legros commented on June 3rd 19 at 19:24
in most cases (definitely in box2d) physics is computed separately, and where to display the picture you decide. - Austen.Thompson53 commented on June 3rd 19 at 19:27
I did not understand the trick of how I can do this without a canvas in js. As I wrote I have already formed, laid out page and I need to manipulate its elements. Can I something not so understood and I can do some script to make it back to the canvas, to throw it to the location of this block and make this magic all by clicking. But on current data, I realized it is. I need to rebuild on the canvas, but it does not suit me - shane.Legros commented on June 3rd 19 at 19:30
if you open box2d-js.sourceforge.net/index2.html and we scroll down, we can see the sample code.
It is divided into five blocks.
Only in the last, the fifth unit is used as a canvas to display.
The calculation of the physics takes place without any canvases.
No one bothers you instead of drawing on the canvas to move the dom elements. - Austen.Thompson53 commented on June 3rd 19 at 19:33
not have noticed. Thank you. I will try. - shane.Legros commented on June 3rd 19 at 19:36

Find more questions by tags jQueryCSSJavaScript