0

現在(div内のテキストに従って)サイズが変更され、ボタンクリックイベントでコンテナに追加されているdivの配列があります。アルゴリズムを使用して配列をランダムに並べ替えていますが、それを含む div 内にその順序で配置したいと考えています。

JS

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

HTML

 <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>

CSS

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;
}

これを解決する簡単な方法はありますか?配列がコンテナー div 内に保持するのと同じ数の非表示の div を持ち、配列のインデックスのようなものを使用して、非表示の div の ID に追加することを考えました。それよりも div の配列をランダムに並べ替える簡単な方法はありますか?

4

0 に答える 0