Ecco una bozza. Funzione con Firefox ma non con IE.

codice HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
 .drop1{
 background-color:yellow;
 }
 .drop2{
 background-color:green;
 }
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
 var dragFrom = null;
 function allowDrop(ev){
         ev.preventDefault();
 }    
 
 function drag(ev){
         ev.dataTransfer.setData("text", ev.target.id);
 }    
 
 function drop(anObject,ev){
         ev.preventDefault();
     var data = ev.dataTransfer.getData("text");        
     if (anObject.innerHTML != '') {
       document.getElementById('log').innerHTML = document.getElementById('log').innerHTML + anObject.innerHTML;
      anObject.innerHTML = '';
     }
     anObject.appendChild(document.getElementById(data));
 }
//-->
</script>
</head>
<body>
<table summary="">
<tr style="border:1px solid black">
  <td width="150">P1</td><td width="150">P2</td><td width="150">P3</td><td width="150">P4</td>
</tr>
<tr style="border:1px solid black">
<td width="150" class= 'drop1' id= 'p1' ondrop='drop(this,event)' ondragover='allowDrop(event)' >
  <div id='a1000' draggable= 'true'  ondragstart= 'drag(event)'>1000</div>
</td>
<td width="150" class= 'drop2' id= 'p2' ondrop='drop(this,event)' ondragover='allowDrop(event)'>
  <div id='a1001' draggable= 'true'  ondragstart= 'drag(event)'>1001</div> 
</td>

<td width="150" class= 'drop1' id= 'p3' ondrop='drop(this,event)' ondragover='allowDrop(event)'>
  <div id='a1002' draggable= 'true'     ondragstart= 'drag(event)'>1002</div>
</td>
<td width="150" class= 'drop2' id= 'p4' ondrop='drop(this,event)' ondragover='allowDrop(event)'>
  <div id='a1003' draggable= 'true'     ondragstart= 'drag(event)'>1003</div> 
</td>
</tr>
</table>
Pezzi presi :
<div id="log"></div>
</body>
</html>