Как сделать блокировку неправильного парядка картинов в таблице с помощью JS?

Question

Тимур Токарь @OverClocker

Как сделать блокировку неправильного парядка картинов в таблице с помощью JS?

Суть задания собрать мозайку из 4х элементов в таблице. С этим вопросов не возникло. Вопрос в том как сделать блокировку неправильной вставки элемента мозайки в таблицу? То есть при не правильной вставке элемента в нужную ячейку таблицы ничего не меняется.
Примечание: работает только в ie.
Работает так:
Нажимаем на элемент мозайки, затем нажимаем на ячейку таблицы. После этого элемент мозайки вставляться в указанную ячейку таблицы.
Мозайка выглядит так:

PS Не особо силён в JS.
HTML исходник:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Мозайка</title>
</head>
<body style="background-color: deepskyblue">
<h1 style="text-align: center">Собери мозайку!</h1>
<table BORDER=0 CELLSPACING=4 CELLPADDING=0 style="margin: 0 auto">
    <tr>
        <td><img src="images/r3.gif" width=90 height=160 dragEnabled style="position:absolute; top:60px; left:400px; cursor:hand;"></td>
        <td><img src="images/r4.gif" width=90 height=160 dragEnabled style="position:absolute; top:60px; left:500px; cursor:hand;"></td>
        <td><img src="images/r1.gif" width=90 height=160 dragEnabled style="position:absolute; top:60px; left:600px; cursor:hand;"></td>
        <td><img src="images/r2.gif" width=90 height=160 dragEnabled style="position:absolute; top:60px; left:700px; cursor:hand;"></td>
    </tr>
</table>
<table border="1" cellspacing="1" cellpadding="0" style="margin: 200px auto; ">
    <tr>
        <td><img src="images/r0.gif" width=90 height=160 cell></td>
        <td><img src="images/r0.gif" width=90 height=160 cell></td>
    </tr>
    <tr>
        <td><img src="images/r0.gif" width=90 height=160 cell></td>
        <td><img src="images/r0.gif" width=90 height=160 cell></td>
    </tr>
</table>
<script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>

Исходник подключаемого скрипта JS:

var elDragged = null  // Перемещаемый элемент.
function doMouseDown() {
    // Сохранение перемещаемого элемента.
    var elCurrent=event.srcElement;
    if(elDragged==null){
        if(elCurrent.getAttribute("dragEnabled")==null)elCurrent=null;

        if(elCurrent!=null){
            elDragged=elCurrent;
        }
    }else{
        if(elCurrent!=null && elCurrent.getAttribute("cell")!=null){
            //elDragged.style.pixelTop = elCurrent.y;
            //elDragged.style.pixelLeft = elCurrent.x;
            elCurrent.src=elDragged.src;
            elDragged=null;
        }
    }
}
document.onmousedown = doMouseDown;

Ссылка на исходник в архиве