<style type="text/css">
body
{
    background: #99F;
}

#t1,#t2,#t3,#t4,#t5,#t6,#t7,#t8
{
    float: left;
    width: 48px;
    height: 48px;
    margin: 2px;
    background: #0F0;
}
</style>

<script language="javascript">
var element="";
var nummer=0;

var belegt = new Array(0,0,0,0,0,0,0,0);

function obj(id)
{
    return document.getElementById(id);
}

function merkeDragElement(objekt,nr)
{
    element = objekt;
    nummer  = nr;
    obj("info").innerHTML = "dragged: "+objekt.id;
}

function merkeDropElement(objekt,nr)
{
    if(belegt[nr-1]==0)
    {
        objekt.appendChild(element);
        belegt[nr-1]=nummer;
        obj("info").innerHTML = "droped to "+objekt.id;

        for(var i=0;i<8;i++)
        {
            if(i!=(nr-1) && belegt[i]==nummer)
            {
                belegt[i] = 0;
            }
        }
    }

}

</script>

<br/>
<br/>
<br/>

<img id="a0"  draggable="true" ondragstart="javascript:merkeDragElement(this,1);" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwAQMAAABtzGvEAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///8AAABVwtN+AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAGElEQVQYlWNgIBrI/29g/P+DGGpkmYICAFIwVhG8OlvpAAAAAElFTkSuQmCC"/>
<img id="a1"  draggable="true" ondragstart="javascript:merkeDragElement(this,2);" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwAQMAAABtzGvEAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///8AAABVwtN+AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAHUlEQVQYlWNgIBrI/29g/P+DGGromAIEP4ihiAYAg2Ne/8CXRrYAAAAASUVORK5CYII="/>
<img id="a2"  draggable="true" ondragstart="javascript:merkeDragElement(this,3);" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwAQMAAABtzGvEAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///8AAABVwtN+AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAIElEQVQYlWNgIBrI/29g/P+DGIoepgDBD2Io2rsFBQAA9JVe/9s4nk0AAAAASUVORK5CYII="/>
<img id="a3"  draggable="true" ondragstart="javascript:merkeDragElement(this,4);" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwAQMAAABtzGvEAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///8AAABVwtN+AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAH0lEQVQYlWNgIBrI/29g/P+DGIoepgDBD2Io2puCAgAl12ft/Pqr3QAAAABJRU5ErkJggg=="/>


<br/>
<br/>
<br/>

<span id="t1" ondragenter="return false" ondragover="return false" ondrop="javascript:merkeDropElement(this,1);">
</span>
<span id="t2" ondragenter="return false" ondragover="return false" ondrop="javascript:merkeDropElement(this,2);">
</span>
<span id="t3" ondragenter="return false" ondragover="return false" ondrop="javascript:merkeDropElement(this,3);">
</span>
<span id="t4" ondragenter="return false" ondragover="return false" ondrop="javascript:merkeDropElement(this,4);">
</span>
<span id="t5" ondragenter="return false" ondragover="return false" ondrop="javascript:merkeDropElement(this,5);">
</span>
<span id="t6" ondragenter="return false" ondragover="return false" ondrop="javascript:merkeDropElement(this,6);">
</span>
<span id="t7" ondragenter="return false" ondragover="return false" ondrop="javascript:merkeDropElement(this,7);">
</span>
<span id="t8" ondragenter="return false" ondragover="return false" ondrop="javascript:merkeDropElement(this,8);">
</span>

<br/>
<br/>
<br/>

<h4 id="info">Info</h4>

<br/>
<br/>
<br/>

Code 0-1: Quelltext zu obigem Beispiel