How to shuffle a puzzle game of 15?

Question

Would you mind helping me to shuffle this puzzle game of 15:

HTML:

<table id="table1">
    <tr id="tr1">
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content1" draggable="true" ondragstart="drag(event)">
                <p id="p1">1</p>
            </div>
        </td>
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content2" draggable="true" ondragstart="drag(event)">
                <p id="p1">2</p>
            </div>
        </td>
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content3" draggable="true" ondragstart="drag(event)">
                <p id="p1">3</p>
            </div>
        </td>
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content4" draggable="true" ondragstart="drag(event)">
                <p id="p1">4</p>
            </div>
        </td>
    </tr>
    <tr id="tr2">
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content5" draggable="true" ondragstart="drag(event)">
                <p id="p1">5</p>
            </div>
        </td>
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content6" draggable="true" ondragstart="drag(event)">
                <p id="p1">6</p>
            </div>
        </td>
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content7" draggable="true" ondragstart="drag(event)">
                <p id="p1">7</p>
            </div>
        </td>
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content8" draggable="true" ondragstart="drag(event)">
                <p id="p1">8</p>
            </div>
        </td>
    </tr>
    <tr id="tr3">
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content9" draggable="true" ondragstart="drag(event)">
                <p id="p1">9</p>
            </div>
        </td>
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content10" draggable="true" ondragstart="drag(event)">
                <p id="p1">10</p>
            </div>
        </td>
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content11" draggable="true" ondragstart="drag(event)">
                <p id="p1">11</p>
            </div>
        </td>
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content12" draggable="true" ondragstart="drag(event)">
                <p id="p1">12</p>
            </div>
        </td>
    </tr>
    <tr id="tr4">
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content13" draggable="true" ondragstart="drag(event)">
                <p id="p1">13</p>
            </div>
        </td>
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content14" draggable="true" ondragstart="drag(event)">
                <p id="p1">14</p>
            </div>
        </td>
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content15" draggable="true" ondragstart="drag(event)">
                <p id="p1">15</p>
            </div>
        </td>
        <td id="divdrop" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
    </tr>
</table>

Javascript:

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

CSS:

body {
    margin:0;
    padding:0
}
#table1 {
    border: 1px dotted #303030;
}
#divdrag, #divdrop {
    float:left;
    width:80px;
    height:80px;
    margin:10px;
    padding:0px;
    border:1px solid #aaaaaa;
    background-color:#333;
}
td div {
    background-color:#ccc;
    width:80px;
    height:80px;
    color:#191919;
}
#p1 {
    font-size:70px;
    text-align:center;
    margin:0 auto;
}

I tried using a lot of ways to make this game has a working shuffle function but with no success so I gave up :/ From all those functions that I tried, neither of them works. I think the problem is caused by a lack of DIV containers instead of using table datas but I am not sure. I appreciate and rep for any kind of helping code in pure javascript or it's library - jquery. Thanks in advance! Fiddle: http://jsfiddle.net/2tESd/4/

Answer 1

Solution shuffles the empty square as well and updates content_id

$(function(){
    var nums=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];        
    nums.sort(function(){
       return (Math.round(Math.random())-0.5);
    });
    var $cells=$('#table1 td').empty();

    $.each(nums, function(i,num){         
           $cells.eq(i).html( num < 16 ? cellHtml( num) :'' ) ;
    });
});

function cellHtml( num){
    var html='<div id="div_content'+num+'" draggable="true" ondragstart="drag(event)">'+
                '<p class="p1">'+num+'</p>'+
            '</div>';    
    return html;    
}

DEMO

EDIT: Alternate solution

$(function(){
    var $cells=$('#table1 td'), $cellClones=$cells.clone();    
    $cellClones.sort(function(){
       return (Math.round(Math.random())-0.5);
    });

    $cells.each(function(i,el){
        $(this).replaceWith( $cellClones[i]);
    })

})

DEMO

Answer 2

Your tag mentioned jQuery and using jQuery is the easiest solution. Add folloving function to your code:

$(document).ready(function() {

    var arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
    var idx;
    $("div[id^='div_content'] > p").each(function() {
         idx = Math.floor(Math.random() * arr.length);
         $(this).text(arr[idx]);
         arr.splice(idx, 1);
    })
})

It declares array of values (1 thru 15) and then loops thru all element of your board picking random value and removing it from array to avoid repetition.

Demo: http://jsfiddle.net/2tESd/6/

That said - do revise your HTML, you cannot have multiple HTML elements with the same IDs - it could lead to trouble.