`
hxf5129096
  • 浏览: 8503 次
文章分类
社区版块
存档分类
最新评论

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而烦心了 
只需要关心在左边还是在右边   左边是如何排序的 ,右边又是如何排序的
这样我们就轻松多了   就和我那朋友说的 一静一动
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    JQueryUI拖拽效果

    "JQueryUI拖拽效果"是其中的一个核心功能,它允许用户通过简单的API调用来实现元素在页面上的拖放操作。 1. **拖拽功能的实现** jQueryUI的`draggable()`方法用于将任何HTML元素变为可拖动的对象。只需在目标元素...

    jQueryUI拖拽效果_拖拽div的值到table表格里面

    总结,实现jQuery UI拖拽效果的关键在于正确配置`draggable`和`droppable`组件,并确保HTML结构支持拖放行为。通过结合JavaScript和CSS,我们可以创建出直观且易于使用的用户界面,让用户能够方便地将div中的数据...

    jquery ui拖拽 克隆

    在本教程中,我们将深入探讨如何使用jQuery UI实现拖拽(dragging)和克隆(cloning)功能,尤其是如何在拖拽过程中实现元素的复制。 首先,要使用jQuery UI的拖拽功能,你需要在你的HTML页面中引入jQuery库和...

    jQuery UI拖拽拖放插件jquery.top-droppable

    **jQuery UI 拖拽拖放插件:jquery.top-droppable** 在Web开发中,交互性和用户体验至关重要,而拖放功能(Drag and Drop)是提升用户体验的一种有效方式。jQuery UI是一个强大的JavaScript库,提供了丰富的用户...

    jQuery UI拖拽信息到Table表格特效

    综上所述,"jQuery UI拖拽到Table表格特效"是一个利用jQuery UI库实现的增强用户交互的实用功能。通过结合`draggable`和`droppable`,我们可以创建出一个直观、用户友好的界面,使用户能够轻松地将信息添加到表格中...

    Jquery插件包 UI 拖拽

    【jQuery 插件包 UI 拖拽】是基于 jQuery 库的一个强大功能扩展,它提供了用户界面交互的拖放功能。在Web开发中,拖放功能常常用于提高用户体验,例如整理列表项、布局调整或者文件管理等。jQuery UI 的拖拽插件使...

    JQuery UI 中文帮助文档

    **jQuery UI 中文帮助文档详解** jQuery UI 是一个基于 jQuery JavaScript 库的开源项目,它提供了丰富的用户界面组件,使得开发者能够轻松创建交互性强、视觉效果美观的网页应用。这个中文帮助文档是针对jQuery UI...

    bootstrap&jQueryUI例子

    在"bootstrap&jQueryUI例子"这个压缩包中,可能包含的是结合了这两个框架的示例代码或项目。这些示例通常会展示如何在同一个页面中有效地利用 Bootstrap 的布局和样式,同时引入 jQuery UI 的组件,实现更复杂的用户...

    jQuery UI组件 jQuery UI

    同时,jQuery UI 提供了许多可定制的选项,如宽度、高度、是否可拖动、关闭按钮等,以满足不同需求。 ### 开发与调试 `development-bundle`目录包含未压缩和未合并的jQuery UI资源,适合在开发过程中使用,便于...

    ,jqueryui jquery ui包 效果不错,只是为了自己保存

    **jQuery UI:一个强大的前端开发工具包** jQuery UI是一个基于jQuery JavaScript库的扩展,它提供了一整套可交互的用户界面组件,包括对话框、拖放功能、日期选择器、进度条、排序列表等。这个名为"jquery-ui-...

    jquery-ui.css、jquery-ui.js下载

    《jQuery UI:深入理解与应用》 jQuery UI是基于JavaScript库jQuery的一个扩展,它提供了一系列丰富的用户界面组件,包括但不限于对话框(Dialogs)、日期选择器(Datepickers)、拖放功能(Drag and Drop)、排序...

    jquery ui & themes

    3. **拖放(Draggable/Droppable)**:jQuery UI实现了元素的拖放功能,允许用户将一个元素拖动到另一个元素上,常用于构建可交互的布局或者文件管理器等应用。 4. **排序(Sortable)**:这个功能允许用户对列表或...

    jQuery UI Multiselect (jQuery UI 多选框)

    首先,确保在项目中引入了jQuery和jQuery UI的核心库,然后引入jQuery UI Multiselect的CSS和JS文件。接下来,可以按照以下步骤创建和初始化多选框: ```html &lt;!-- HTML结构 --&gt; &lt;option value="1"&gt;Option 1 ...

    web流程设计器(jsplumb+jqueryUI)拖拽功能

    在本文中,我们将深入探讨如何使用jsPlumb和jQuery UI库构建一个基于Web的流程设计器,该设计器具有拖拽功能,并适用于多种主流浏览器。这个工具对于业务流程建模、工作流设计以及任何需要图形化表示流程的应用场景...

    jQuery UI拖拽到Table表格特效.zip

    在“jQuery UI拖拽到Table表格特效”中,我们可以将页面上的任意元素(如文本、图片或者自定义对象)拖动到表格的特定单元格内,实现动态添加数据或调整数据布局的效果。这个特效的核心在于jQuery UI的`draggable`和...

    前端项目-jqueryui-touch-punch.zip

    在“前端项目-jqueryui-touch-punch”这个项目中,包含的文件可能是jQuery UI Touch Punch的源码或示例。通过解压并研究这个项目,你可以了解到如何将这两个工具结合到自己的Web应用中,以提供兼容触摸设备的用户...

    最新jQueryUI组件下载

    这个“最新jQueryUI组件下载”应该指的是版本号为1.10.0的jQuery UI压缩包。 jQuery UI 包含了大量的可交互和视觉上吸引人的元素,它简化了网页开发,让开发者可以快速实现复杂且用户友好的界面设计。以下是一些...

    jQuery UI表格内容拖拽代码.zip

    《jQuery UI表格内容拖拽实现详解》 在Web开发中,提升用户体验往往是一个重要的目标,尤其是在处理大量数据的表格时。jQuery UI库提供了一系列强大的工具,使得开发者能够轻松实现交互式功能,例如拖放操作。本篇...

    Jquery Ui 后台模板界面

    jQuery UI 的 Draggable 和 Sortable 插件使得元素可以被轻松地拖动到不同位置,甚至可以在多个容器之间进行排序,提高了后台操作的灵活性。 **4. 下拉菜单和按钮** jQuery UI 提供了多种风格的下拉菜单和按钮,...

    jQueryUI API文档资料

    jQuery UI的核心在于它的组件,这些组件是预先封装好的UI元素,如Accordion(手风琴)、Autocomplete(自动完成)、Button(按钮)、Calendar(日历,即日期选择器)、Dialog(对话框)、Draggable(可拖动)、...

Global site tag (gtag.js) - Google Analytics