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" id="${divId}"></div>
??<script>????
???$("#${divId}").load("${url}",null,function(response){
???$("#${divId}").html(response);
???});
??</script>
?</s:iterator>
</div>
<div id="column2" 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而烦心了?
只需要关心在左边还是在右边?? 左边是如何排序的 ，右边又是如何排序的
这样我们就轻松多了?? 就和我那朋友说的 一静一动
?

?

1 楼 ganjiang 2012-11-19 lz是好人，我来评一个