Attempting to enhance a jQuery function that inserts a new div into a parent div containing other divs with the JQuery.throwable physics engine applied.
Created a <p> with the class .button and added this jQuery code:
$(".button").click(function () {
$("#wrapper").append('<div class="instrument bass"></div>');
To include the new div in the gravity engine, had to reinitialize the JQuery.Throwable function. The updated jQuery code for adding a new div is as follows:
$(".button").click(function () {
$("#wrapper").append('<div class="instrument bass"></div>');
$(".bass").throwable({
containment:"parent",
drag:true,
gravity:{x:0,y:0},
impulse:{
f:52,
p:{x:1,y:1}
},
shape:"circle",
autostart:true,
bounce:2,
damping:2,
areaDetection:[[0,0,300,300]],
collisionDetection: true
});
The #wrapper div serves as a container covering 100vh and 100w of the browser window to prevent the bouncing divs from falling out. Elements within the container are named with the class instrument and colored using additional classes such as bass, drums, lead, and chord.
Encountering issues with collisions when multiple new divs are added consecutively. Strange interactions between elements occur, possibly due to invisible boundaries or incorrect implementations in the code. Attempted using display:inline-block on .instrument but the issue persists.
Troubleshooting the code that adds the new div, aiming to simplify and resolve abnormal collision behavior. Provided a Plunker link below for further examination of the issue. Play around with the existing divs, then try adding multiple new divs to observe the erratic collision patterns.
Plunker: http://plnkr.co/edit/89LT1xqJZmLznymNypKL?p=preview