現在(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 の配列をランダムに並べ替える簡単な方法はありますか?