jQuery只能拖拽一次？求解！

一下是我学习jquery写的一个小例子，主要功能是拖拽其中的一个小图片，可以把它放在其他空白想方块中，若原方块中有，就直接替换。但是每个图片却只能拖拽1次，求大侠指点迷津！谢谢
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head>
<title>title</title>
<script language="javascript" src="ui/jquery-1.3.2.js"></script>
<script language="javascript" src="ui/ui.core.js"></script>
<script language="javascript" src="ui/ui.draggable.js"></script>
<script language="javascript" src="ui/ui.droppable.js"></script>
<script language="javascript">
$(function(){
//让所有含有dragg的类都能够clone拖拽
$(".dragg").draggable({helper:"clone",opacity:"0.4"}); //法取出当鼠标点下时（拖拽必点下）Dom元素
//取出源位置，及源位置中的DOM元素
var source,srcDom,tee,teeDom;
$(".fang").bind("mousedown",function(){
source=$(this);
srcDom=source.html();
});

//指定所有fang都能接收canin类的DOM元素
$(".fang").droppable({ accept:function(draggable){
return $(draggable).hasClass("canin");//指定接收的类名，并返回true  or false

},
drop:function(){ //通过$(this)取出目标对象，和其中的DOM元素
tee=$(this);
teeDom=tee.html();

//互换代码
source.html("");
source.html(teeDom);
tee.html("");
tee.html(srcDom);
source=null;
srcDom=null;
tee=null;
teeDom=null;
}
});
});

</script>
<style>
<!--
.container{
position:absolute;
width:435px;
height:240px;
margin-top:30px;
background-color:#F2D5CA;
}
.fang{
position:relative;
float:left;
width:90px;
height:90px;
margin-top:15px;
margin-bottom:15px;
margin-left:15px;
background-color:#F29FCA;
}
.dragg{
position:relative;
z-index:100;
}
-->
</style>
</head>
<body>
<center>
<div class="container">
<div class="fang" id="one">
<div id="testId" class="dragg canin"><a href="#"><img src="tee.jpg" /></a></div>
</div>
<div class="fang" id="two"></div>
<div class="fang" id="three"></div>
<div class="fang" id="four"></div>
<div class="fang" id="five"></div>
<div class="fang" id="six"></div>
<div class="fang" id="seven"></div>
<div class="fang" id="eight">
<div id="testId" class="dragg canin"><a href="#"><img src="src.jpg" /></a></div>
</div>
</div>
</center>
</body>
</html>