使用JQuery.throwable将div添加到场景 [英] Add divs to scene with JQuery.throwable

问题描述

我试图添加一个jQuery函数添加一个div到一个父div由divs与 JQuery.throwable 物理引擎。

I'm trying to add a function with jQuery that adds a div into a parent div consisting of divs with the JQuery.throwable physics engine assigned to them.

我创建了一个< p> 与 .button 类具有此jQuery代码：

I've made a <p> with the class .button having this jQuery code to it:

$(".button").click(function () {
$("#wrapper").append('<div class="instrument bass"></div>');

我还必须重新启动JQuery.Throwable函数，以使新div独立于引力引擎，因此添加新div的代码如下所示：

I also had to reinitiate the JQuery.Throwable function in order for the new div to be apart of the gravity engine, so the code adding a new div looks like this:

$(".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
});

#wrapper 整个场景的容器，覆盖整个浏览器窗口的 100vh 和 100w ，因此弹出的div不会掉出容器。容器中的元素用 instrument 命名，并且它们的颜色与附加类 bass ， drums ， lead 和 chord 。

#wrapper is the div that works as a container for the whole scene, covering 100vh and 100w of the whole browser window, so the divs that bounces around will not fall out of the container. The elements that are in the container are named with the class instrument and they have a variation of colors with the additional classes bass, drums, lead and chord.

当点击 .button 我想添加一个新的div类 instrument bass ，如上面的代码所示。我有一些首字母的问题，旧的div从安全壳上掉下来，但后来我添加了 #wrapper 并添加了 containment：

When clicking on .button I want to add a new div with the classes instrument bass as shown in the code above. I had some initials problems with the "old" divs falling out of the containment before, but then I added the #wrapper and added the containment: "parent" option to the different classes through jQuery, and that worked.

现在的问题是，如果我在一行中添加了几个新的div ，所有元素之间的碰撞开始变得奇怪。这就像是在场景中有不可见的盒子或某物在所有元素之间产生了意想不到的和痉挛的碰撞。我试图添加 display：inline-block 到 .instrument 看看是否解决了， 't。

The problem now is, if I add several new divs in a row, the collision between all the elements are starting to act strange. It's like if there are invisible boxes or something in the scene that creates this unexpected and spastic collision between all elements. I've tried to add display:inline-block to .instrument to see if that solved it, but it didn't.

我猜我在添加一个新div的代码中犯了一些错误。也许有一些方法来简化它，摆脱这种奇怪的碰撞进行吗？我在下面添加了一个Plunker。首先尝试扔现有的div，看看它应该如何行动，然后添加几个新的div，看看它的行为。

I'm guessing that I've made some mistake in the code that adds a new div. Maybe there's some way to simplify it and get rid of this strange collision going on? I've added a Plunker below. First try to throw around the existing divs to see how it should act, and then add several new divs to see how it behaves.

Plunker： http://plnkr.co/edit/89LT1xqJZmLznymNypKL?p=preview

推荐答案

在$（document）.ready（function（）
开头添加button.click事件希望这将工作因为它为我工作。

Add the button.click event at the beginning of $(document).ready(function() hope this will work cause it worked for me.

 $(document).ready(function() {
 $(".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
                });
});

这篇关于使用JQuery.throwable将div添加到场景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！