拖拽已经折磨我好几天
虽然头已经把拖拽闹完了
可是从他手里接到活的时候
是写死的
而且
不能保存值
经过前面几天的思索 发现走错了路
头突然的一句话点醒了我
最后确定的思路是
先说下设计的数据库吧
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而烦心了
只需要关心在左边还是在右边 左边是如何排序的 ,右边又是如何排序的
这样我们就轻松多了 就和我那朋友说的 一静一动
分享到:
相关推荐
jquery拖拽排序插件div自由拖动排序代码
Jquery Sortable实现div拖动排序效果 Jquery Sortable实现div拖动排序效果
jquery div拖动排序效果代码是一款打开从左到右慢慢展开,可自由拖动排序特效.
jQueryUI拖拽效果_拖拽div的值到table表格里面,jQueryUI拖拽效果_拖拽div的值到table表格里面(html)
jQuery div可以任意拖动,只能在X轴上拖动,只能在父容器中移动,以网格的方式拖动,指定拖动交互元素(只有内部小方块区域可以进行拖动)。
通过鼠标拖动来改变div的顺序,来实现指标的排序。使用了Jquery,jquery-ui.js,sortable,自己原创,效果很绚。 配合ThinkPHP可以实现把数据入库,由于使用的是ubuntu, 文件编码格式都是utf-8.
可以拖拽的布局页面,jQuery.UI插件
利用jquery ui和append实现元素添加,拖动。自定义div大小!
基于jquery的可拖动div 用于制作拖拽功能
可拖动div边框改变大小的方法,jquery拖拽改变div大小效果,。。。。。。。。。。。。。。。。。。。。。。。。。
遮罩 DIV 拖动 jquery遮罩 DIV 拖动 jquery遮罩 DIV 拖动 jquery遮罩 DIV 拖动 jquery
透明div可以拖动 Jquery特效,CSS+DIV透明div可以拖动 Jquery特效,CSS+DIV透明div可以拖动 Jquery特效,CSS+DIV
jQuery ui drag插件实现浮动div拖动排列布局代码,jQuery实现拖动布局并将排序结果保存到数据库
jquery拖动编辑div,包括关闭,改变div颜色.....
jquery 拖拽图片或div,非常简单方便......
jQuery鼠标上下拖动div排序代码、鼠标拖动层改变排列顺序,div左上角还有按钮操作,点击只是弹窗提示效果。
Jquery弹出div层窗口以及div屏幕居中, 背景滤镜效果, div拖拽效果 在IE和FireFox测试通过!
用于页面生成,自带轮播、切换等效果,基于bootstrap和jquery,页面可预览编辑
利用JQuery实现DIV的拖拽功能,代码很简单