Jquery ui 拖拽保存

先说下设计的数据库吧
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而烦心了
只需要关心在左边还是在右边 左边是如何排序的 ，右边又是如何排序的
这样我们就轻松多了 就和我那朋友说的 一静一动