jquery 拖拽动态添加div 保存拖拽后的效果

拖拽已经折磨我好几天
虽然头已经把拖拽闹完了
可是从他手里接到活的时候
是写死的
而且
不能保存值

经过前面几天的思索  发现走错了路
头突然的一句话点醒了我

最后确定的思路是
先说下设计的数据库吧
url         链接        通过来链接吧内容显示到div中
xuhao   序号        这个值是变化的根据他的顺序来在页面显示拖拽后的div的位置
divId     div的id    这个值从添加以后到删除都不会变
lr           位置        左边l  右边r

先不说添加
首先说一下显示
查询左边显示的数据   根据lr添加条件   xuhao排序
查询右边显示的数据   根据lr添加条件   xuhao排序
String hqlL="from Home where lr='l' order by xuhao";//编写hql语句
homeListL=homeService.findHomeHql(hqlL);//页面中左边显示的数据
String hqlR="from Home where lr='r' order by xuhao";//编写hql语句
homeListR=homeService.findHomeHql(hqlR);//页面中右边显示的数据

那么查询就差完了
该到页面去看看如何显示并且将显示的数据在div中显示了
循环生成div  并且通过divid的值给他的链接赋值
<div id="column1" class="column">
 <s:iterator  value="homeListL">
  <div class="widget" id="${divId}"></div>
  <script>    
   $("#${divId}").load("${url}",null,function(response){
   $("#${divId}").html(response);
   });
  </script>
 </s:iterator>
</div>
<div id="column2" class="column">
 <s:iterator  value="homeListR">
  <div class="widget" id="${divId}"></div>
  <script>
   $("#${divId}").load("${url}",null,function(response){
   $("#${divId}").html(response);
   });
  </script>
 </s:iterator>
</div>

下面来看看拖动的代码所在
<script>

var outerLayout;

$(document).ready( function() {
 outerLayout = $("body").layout();
 $(".column").sortable({
  connectWith: $(".column")
 , placeholder: 'widget-placeholder'
 , cursor:   'move'
 , helper:   function (evt, ui) { return $(ui).clone().appendTo('body').show(); }
 , over:   function (evt, ui) {
       var
        $target_UL = $(ui.placeholder).parent()
       , targetWidth = $target_UL.width()
       , helperWidth = ui.helper.width()
       , padding  = parseInt( ui.helper.css('paddingLeft') )
           + parseInt( ui.helper.css('paddingRight') )
           + parseInt( ui.helper.css('borderLeftWidth') )
           + parseInt( ui.helper.css('borderRightWidth') )
       ;
        ui.helper.height('auto').width( targetWidth - padding );
      }
 , stop:saveLayout 
 });  
});
function saveLayout() {//拖拽以后会触发这个方法
   var col1= $("#column1").sortable("toArray");
   var col2= $("#column2").sortable("toArray");  
   var col=col1+";"+col2;
   location.href="sys/updateHomeDivID.action?col="+col;
}
</script>

看看我们的修改如何闹
首先将拖动后的div顺序传了过来
根据分号分隔值，这样就得到了左边的div和右边的div
a1代表左边的div的id   a2代表右边的div的id 
 String [] a=null;
 if(col!=null && !"".equals(col)){
  a=col.split(";");
 }
 String a1 []=null;
 String a2 []=null;
 if(a[0]!=null && !"".equals(a[0])){
  a1 =a[0].split(",");
 }
 if(a[1]!=null && !"".equals(a[1])){
  a2 =a[1].split(",");
 }
 获取根据usercode获取数据
 homeList=homeService.findHome(user.getUserCode());
 循环homeList你想要什么啊  我当然是要通过匹配divid的值来给其赋值值
 div的值是不变的  但是xuhao 和  lr是变化的啊
 从左边拖到右边  lr的变化从l变到r   xuhao的变化
 从上边拖到下边  lr的没变化              xuhao的变化
 
 循环homeList 如果homeList中有和a1中匹配的divid的话 立马修改位置  修改xuhao 修改lr
 xuhao每次拖拽更新时 都是重新定制的
 for(int i=0;i<homeList.size();i++){
  Home h=(Home)homeList.get(i);
  if(a1!=null && a1.length!=0){
   for(int j=0;j<a1.length;j++){
    if(h.getDivId().equals(a1[j])){
     h.setLr("l");
     h.setXuhao("l"+j);
    }
   }
  }
  
  if(a2!=null && a2.length!=0){
   for(int j=0;j<a2.length;j++){
    if(h.getDivId().equals(a2[j])){
     h.setLr("r");
     h.setXuhao("r"+j);
     
    }
   }
  }
  homeService.updateHome(h);//修改
 }

好了现在拖拽后你的位置就可以保存了
既然这样好了
那是不是还少个一个添加链接的地方呢
是不是还少个能根据页面div布局自动识别新添加的div放哪里呢

首先的定义下div有多少个id  我这里只有十个
想有多少有多少，但是divid一定是要有规律的
定义所有div只能拥有以下id
Home homes;
//*****setter  getter****//
String [] shuzu={"w1","w2","w3","w4","w5","w6","w7","w8","w9","w10"};
可是问题又出现了  我不知道这里面哪个能用  因为divid是不可以重复的
所以就要和数据库中已经存在的divid做个比较  把能用的拿出来

 homeList=homeService.findHome(user.getUserCode());//获取数据库数据
这个比较方式是我从网上摘的   感觉很省力
先把数据库divid拼成字符串
字符串去和shuzu这个divid比较全的数组比较  检索不到的就是还能用的
 String str =""; 
 List shuzuList=new ArrayList();//能用的divid
 for(int j=0;j<homeList.size();j++){
  str+=homeList.get(j).getDivId();    
 } 
 for(int i=0;i<shuzu.length;i++){
  if(str.indexOf(shuzu[i])==-1){
   shuzuList.add(shuzu[i]);
  }
 }
 将第一个能用的使用   因为我的shuzu这个数组顺序都是排列好的
 homes.setDivId(shuzuList.get(0).toString());
 
 接下来  我们的divid已经解决掉了   是该解决xuhao  lr的问题了
 刚开始我是用所有的数据的size来判断新添加的数据该放在哪
 奇数放右边   偶数放左边
 后来问题出现了
 数据有8条
 左边5条  右边3条
 数据是个偶数   应该放在左边的  但是左边已经有5条了  右边只有3条了
 这样看起来不是很好
 只能重新考虑思想
 
 根据比较左边数据和右边数据的大小来决定新来的数据放在哪里
 如果左边数据多的话  那么应该放在右边了
 相等的话                 放在左边好了
 如果左边少的话        放在左边好了
 
 这样lr就这样定好了
 但是xuhao不好闹了  
 我的序号是这样闹的  l0  l1  l2 l3    r0 r1 r2 r3
 只能是这里面最大的xuhao 找第二位分离出来加1 在拼装
 String hqll="from Home where lr='l' order by xuhao";//根据lr=l   序号排序查询值
  List<Home> l=homeService.findHomeHql(hqll);
  String hqlr="from Home where lr='r' order by xuhao";//根据lr=r   序号排序查询值
  List<Home> r=homeService.findHomeHql(hqlr);
  if(null!=homeList &&homeList.size()>0){
   //决定添加数据的位置
   if(l.size()>r.size()){//左边数据多 数据方在右边
    homes.setLr("r");//
    String r1=r.get(r.size()-1).getXuhao().substring(1, 2);
    homes.setXuhao("r"+(Integer.parseInt(r1)+1));
   }else if(l.size()==r.size()){//数据一样多 //数据放在左边
    homes.setLr("l");
    String l1=l.get(l.size()-1).getXuhao().substring(1, 2);
    homes.setXuhao("l"+(Integer.parseInt(l1)+1));
   }else{//数据放在左边
    homes.setLr("l");
    String l1=l.get(l.size()-1).getXuhao().substring(1, 2);
    homes.setXuhao("l"+(Integer.parseInt(l1)+1));
   }
  }
  homes.setUserCode(user.getUserCode());
  f=homeService.addHome(homes);
  
ok 这样就添加进入了

添加的时候制定好divid的值 我们以后就不需要为divid而烦心了 
只需要关心在左边还是在右边   左边是如何排序的 ，右边又是如何排序的
这样我们就轻松多了   就和我那朋友说的 一静一动
 

 

评论

6 楼 duinibuhaome 2014-11-10  

好几年前的代码了 已经没保存了

5 楼 lsllsg2014 2014-10-13  

楼主，你好，我现在很需要这个，能发个完整的代码吗 [e-mail]

4 楼 Hey_Tuesday 2013-06-06  

    楼主，您的这个例子是我现在急需的东西，您看到留言能否发一份完整的代码给我，我的邮箱地址是：[e-mail]

3 楼 manboye 2013-05-08  

你好，可发份全的代码给我吗 [e-mail] 先谢了啊 呵呵

2 楼 hongyangshu117 2012-11-30  

你好，我看你代码好像不全呀。。能不能发一份全的给我  [e-mail]  谢谢

1 楼 ganjiang 2012-11-19  

lz是好人，我来评一个