jquery 拖动替换问题

悬赏园豆：50 [已解决问题] 解决于 2014-03-16 20:34

我用了jquery拖动,拖动可以替换位置,但是第一次运行的时候,不能替换,只有拖动后的元素才可以实现替换,求大神解决

<!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>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<script type="text/javascript">

$(function(){
var dargElementName='td div';
var dds=$(dargElementName);
$(dds).each(function(i)
{
  $(dds[i]).draggable({
   onStopDrag:onMyStopDarg
   });
});

function onMyStopDarg(e)
{
  var that=this;
  var n=-1;

  var ex=parseFloat($(this).css('left').replace('px',''));
  var ey=parseFloat($(this).css('top').replace('px',''));
  var ew=parseFloat($(this).css('width').replace('px',''));
  var eh=parseFloat($(this).css('height').replace('px',''));

  var x=parseFloat(e.data.startLeft);
  var y=parseFloat(e.data.startTop);

  var left=-1;
  var top=-1;

  var dds=$(dargElementName);

  $(dds).each(function(i){

   if(that.id!=dds[i].id && n==-1)
   {
    /*目标点坐标和宽高*/
    left=parseFloat($(dds[i]).css('left').replace('px',''));
    top=parseFloat($(dds[i]).css('top').replace('px',''));
    var width=parseFloat($(dds[i]).css('width').replace('px',''));
    var height=parseFloat($(dds[i]).css('height').replace('px',''));

    /*四个点坐标比较*/
    if(ex>=left && ex<=left+width && ey>=top && ey<=top+height){
    n=i;
    }
    else if(ex+ew>=left && ex+ew<=left+width && ey>=top && ey<=top+height){
    n=i;
    }
    else if(ex>=left && ex<=left+width && ey+eh>=top && ey+eh<=top+height){
    n=i;
    }
    else if(ex+ew>=left && ex+ew<=left+width && ey+eh>=top && ey+eh<=top+height){
    n=i;
    }
   }
  });

  if(n!=-1)
  {
   /*交换位置*/
   $(dds[n]).css('left',x);
   $(dds[n]).css('top',y);
   $(this).css('left',left);
   $(this).css('top',top);
  }
}

});

</script>

  }
  table{
  margin:0px;
  padding:0px;
  border:1px solid #000000;
  border-collapse:collapse;
  }
  td{
   border:1px solid #000000;

   width:200px;
   height:100px;

  }
  #sortable li{
   padding:0px;
   margin:0px;
   border:1px solid #000000;
   list-style:none;
   width:100px;
   height:50px;
   float:left;
   background-color:#999999;
  }
  #sortable{
   margin:0px;
   padding:0px;
  }
</style>

</head>
<body>
<table border="1">
  <tr>
   <td></td>
   <td></td>
   <td>一教室</td>
   <td>二教室</td>
   <td>三教室</td>
   <td>四教室</td>
  </tr>
  <tr>
   <td rowspan="3">上午</td>
  </tr>
  <tr>
   <td>第一节课</td>
    <td><div id="1" style="width:100px; height:50px;">一班</div></td>
    <td><div id="2" style="width:100px; height:50px;">二班</div></td>
    <td><div id="3" style="width:100px; height:50px;">三班</div></td>
    <td><div id="4" style="width:100px; height:50px;">四班</div></td>
  </tr>
  <tr>
   <td>第二节课</td>
   <td><div id="5" style="width:100px; height:50px;">五班</div></td>
   <td><div id="6" style="width:100px; height:50px;">六班</div></td>
   <td><div id="7" style="width:100px; height:50px;">七班</div></td>
   <td><div id="8" style="width:100px; height:50px;">八班</div></td>
  </tr>
  <tr>
   <td rowspan="3">下午</td>
  </tr>
  <tr>
   <td>第一节课</td>
   <td><div id="9" style="width:100px; height:50px;">九班</div></td>
   <td><div id="10" style="width:100px; height:50px;">十班</div></td>
   <td><div id="11" style="width:100px; height:50px;">十一班</div></td>
   <td><div id="12" style="width:100px; height:50px;">十二班</div></td>
  </tr>
  <tr>
   <td>第二节课</td>
   <td><div id="13" style="width:100px; height:50px;">十三班</div></td>
   <td><div id="14" style="width:100px; height:50px;">十四班</div></td>
   <td><div id="15" style="width:100px; height:50px;">十五班</div></td>
   <td><div id="16" style="width:100px; height:50px;">十六班</div></td>
  </tr>
</table>