Javascript 在容器元素jQuery中随机放置数组元素

我有一个div数组，这些div当前已调整大小（根据div中的文本），然后在按钮单击事件中附加到容器中。我正在使用一种算法对数组进行随机排序，我希望按照这个顺序将它放在包含div的内部

JS

HTML

---

有没有简单的方法来解决这个问题？我考虑过在容器div中包含尽可能多的隐藏div，并使用数组的索引之类的东西附加到隐藏div的ID。有没有比这更简单的方法来随机排序div数组？

直接循环通过div数组和

$（'#divtoappendo'）。append（arrayDiv[I]）？
boxArray=randomizarray（boxArray）；boxArray.each（function（）
@RobSchmuecker好吧，我本来打算把它做得比我应该做的要难得多。它工作得很好，而且是流线型和简单的。谢谢。@wootscootinboogie很高兴：-）很高兴能帮上忙！
  $(document).ready(function ()
        {
            $('.box').draggable();
            var boxArray = $('.box');
            $('#btnSubmit').click(function ()
            {
                randomizeArray(boxArray);
                $('.box').each(function ()
                {
                    $(this).appendTo('#itemContainer');

                });
            });

            //shuffle the array randomly
            function randomizeArray(array)
            {
                var currentIndex = array.length, temporaryValue, randomIndex;

                // While there remain elements to shuffle...
                while (0 !== currentIndex)
                {

                    // Pick a remaining element...
                    randomIndex = Math.floor(Math.random() * currentIndex);
                    currentIndex -= 1;

                    // And swap it with the current element.
                    temporaryValue = array[currentIndex];
                    array[currentIndex] = array[randomIndex];
                    array[randomIndex] = temporaryValue;
                }

                return array;
            }

 <div id="boxContainer">
    <div class="box">
        <div>Item1 - 40</div>
    </div>
    <div class="box">
        <div>
            Item2 - 20</div>
    </div>
    <div class="box">
        <div>
            Item3 - 90</div>
    </div>
    <div class="box">
        <div>
            Item4 - 60</div>
    </div>
    <div class="box">
        <div>
            Item5 - 70</div>
    </div>
    </div>
    <div id="itemContainer">
    </div>

body {
}
.box
{
    width: 200px;
    height: 200px;
    border: 1px solid black;
    padding: 5px 5px 5px 5px;
    margin: 5px 5px 5px 5px;
    min-width:40px;
    min-height:40px;
}
#itemContainer
{
    float:right;
    width:600px;
    height:800px;
    border: 1px solid black;
}
#boxContainer
{
    float:left;
}
#itemContainer div
{
    float:left;
}