Question

I would like to implement a shuffle function, I have this piece of code which worked when the images were not in a table –

var a = $("#deck > div").remove().toArray();
for (var i = a.length - 1; i >= 1; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var bi = a[i];
    var bj = a[j];
    a[i] = bj;
    a[j] = bi;
}
$("#deck").append(a);

and this is the code – http://jsfiddle.net/kommandoss/YuRpU/39/

any help appreciated, thanks

Answer 1

Here is a working jsiddle. I added ids to the parent divs like id=”0″ … id=”7″. I also added a class=”letter” in order to be able to count the amount of images and use it within the calculation. The code basically just loops through 36 times and switches 2 random letters with one another within 2 random divs:

<table border="1">
<tr>
    <td>
        <div ondrop="drop(event);" ondragover="allowDrop(event);" id="0">
            <img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-A-dg-icon.png" ondragstart="drag(event);" id="a" draggable="true" class="letter"/>
        </div>
    </td>
   <td>
        <div ondrop="drop(event);" ondragover="allowDrop(event)" id="1"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-B-dg-icon.png"  ondragstart="drag(event);" id="b" draggable="true"/> </div>
    </td>
   <td>
        <div ondrop="drop(event);" ondragover="allowDrop(event)" id="2"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-C-dg-icon.png"  ondragstart="drag(event);" id="c" draggable="true" class="letter"/> </div>
    </td>
</tr>

<tr>
    <td>
        <div ondrop="drop(event);" ondragover="allowDrop(event)" id="3"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-D-dg-icon.png"  ondragstart="drag(event);" id="d" draggable="true"/> </div>
    </td>
    <td>
        <div ondrop="drop(event);" ondragover="allowDrop(event)" id="4"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-F-dg-icon.png"  ondragstart="drag(event);" id="f" draggable="true" class="letter"/> </div>
    </td>
   <td>
        <div ondrop="drop(event);" ondragover="allowDrop(event)" id="5"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-G-dg-icon.png"  ondragstart="drag(event);" id="g" draggable="true" class="letter"/> </div>
    </td>
</tr>

<tr>
    <td>
        <div ondrop="drop(event);" ondragover="allowDrop(event)" id="6"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-H-dg-icon.png"  ondragstart="drag(event);" id="h" draggable="true" class="letter"/> </div>
    </td>
   <td>
        <div ondrop="drop(event);" ondragover="allowDrop(event)" id="7"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-I-dg-icon.png"  ondragstart="drag(event);" id="i" draggable="true" class="letter"/> </div>
    </td>
  <td>
        <div ondrop="drop(event);" ondragover="allowDrop(event)"> </div>
    </td>
</tr>

​

function shuffleLetters()
{
    var amount = $('.letter').length;
    var foundSix = false;
    var x;
    for(x = 0; x < 36; x++) {
        var randomNum1 = Math.round(Math.random()*amount);

        if(randomNum1 == 6 && !foundSix)
        {
            randomNum1 = 7;
            foundSix = true;
        }
        var randomNum2 = Math.round(Math.random()*amount);
        var randomHtml1 = $("#"+randomNum1).html();
        var randomHtml2 = $("#"+randomNum2).html();
        $("#"+randomNum1).html(randomHtml2);
        $("#"+randomNum2).html(randomHtml1);
    }
}

$(function () {
    shuffleLetters();
});

http://jsfiddle.net/YuRpU/52/