首页 新闻 搜索 专区 学院

jquery 拖动替换问题

0
悬赏园豆: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>

 
 <style>
  div{
   background-color:#999999;

  }
  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>

</body>
</html>

C_林先森的主页 C_林先森 | 初学一级 | 园豆:60
提问于:2014-03-15 10:54
< >
分享
最佳答案
0

因为第一次运行的时候,被替换的div 不是绝对定位,无 left,top ,被拖动过后easyui对div设置了position:absolute;所以解决方法很简单,一开始就给div样式div{position:absolute;}

不过,在fireFox中能解决,可是ie中问题依旧,是由于对position:absolute;渲染不同造成的,ie中如果只设置position:absolute,不设置top,left,其值为auto ; 所以还要设置每个div的初始top,left

可以这样取值:$(dds[i]).offset().left

收获园豆:50
yyutudou | 小虾三级 |园豆:997 | 2014-03-15 20:01

感谢,我去试试

C_林先森 | 园豆:60 (初学一级) | 2014-03-16 20:33
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册