DIV+AJAX+JS+JSP实现页面拖动并且保存布局COOKIE值到数据库

时间:2021-10-22 17:11:35

<!--最新整理-->

这是以前做过的一套程序,研究了一天,通过搜索资料自己修改出来找个功能,虽然最后在项目中做出来的效果很不完美,但是这个功能却是我研究的结果,还是拿出来跟大家分享下,有能力的朋友仔完善一下!
功能:从数据库里获取页面的模块数据,根据cookie值将模块布局在页面,并且拖动模块可以随意部署页面布局,并且将cookie值更新至数据库
-----------------------------------------------------------------------------------------------------------
前台:index.jsp

<%@ page contentType="text/html; charset=GBK" language="java" import="Logistics.common.sqlMethod,java.util.ArrayList" errorPage="" %>
//上面红色的是数据库操作类,里面实现了数据库连接及操作数据库增删改查的类
<%@ taglib uri="/demoltag" prefix="hello" %> //这个是标签引用
<%
sqlMethod dbo = new sqlMethod();
String sql = "Select u_ui from Tmp_users where u_id=6";
ArrayList list = new ArrayList();
list = dbo.rsQuery(sql);
String cool = "";    //这个是在数据库存储的COOKIE值
if(list.size()>0)
{
String t[] = (String[])list.get(0);
cool=t[0];
}else{

}
%>
<html>
<head>
<title>DIV+AJAX+JS+JSP实现页面拖动并且保存布局COOKIE值到数据库</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<meta name="Keywords" content="<hello:web_keyword />"> <!--关键字标签-->
<meta name="Description" content="<hello:description />"> <!--网页描述标签-->
<link rel="stylesheet" href="images/style.css">
<script type="text/javascript">
<!--
var cooldrag="<%=cool%>";   //将cookie值赋给JS
//alert(cooldrag);
//-->
</script>
<script type="text/javascript" src="images/div.js"></script> <!--这个下面有说明-->
</head>
<body leftmargin="0" topmargin="0" bgcolor="#C8C8C8" onLoad="CoolDrag.init('container');">
<!--根据cookie记录初始化页面布局-->
<table width="640" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="4C6C7D" height="24">
<tr bgcolor="FFFFFF">
    <td height="1"></td>
</tr>
<tr>
    <td bgcolor="#8FACBC"><iframe src="http://www.ssdate.cn/top.htm" width=960 height=100> </iframe></td>
</tr>
</table>
<!--div框架开始-->
<div id="container" style="text-align:center">
<!-- begin left -->
   <div id="leftcontainer">
      <div style="height:20; width:100%" class="dragLayer" id="win1">
        <div class="dragHeader">
        <div style="float:left">最新产品</div>
      <div style="float:none"></div>
      <div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
     </div>
     <div class="content"> <hello:product1 /></div>
    </div>
    <!------>
    <div style="height:20; width:100%" class="dragLayer" id="win2">
        <div class="dragHeader">
        <div style="float:left">最新文章</div>
      <div style="float:none"></div>
      <div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
     </div>
     <div class="content"><hello:actire1 /></div>
    </div>
    <!------>
    <div style="height:20; width:100%" class="dragLayer" id="win3">
        <div class="dragHeader">
        <div style="float:left">最新下载</div>
      <div style="float:none"></div>
      <div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
     </div>
     <div class="content"><hello:down1 /></div>
    </div>
   </div>
<!-- end left -->


<!-- begin right -->
   <div id="rightcontainer">
<!--我在做项目时候需求是用动态的,动态程序也放上来了,共享下,可能代码不全,毕竟牵扯的太多,不过好多东西都是可以变通下-->

<%
   String sql = "select * from MK_product_lanmu where positon='1' and show='1' and stu_id='"+stuid+"' and class_id='"+classid+"' and lesion_id='"+lessionid+"' and showweizhi='0' order by dorder";
   System.out.println(sql);
   sqlMethod ddo = new sqlMethod();
   ArrayList showdh = ddo.rsQuery(sql);
   if(showdh.size()>0)
   {
     for(int j = 0 ; j < showdh.size(); j++)
     {
          String[] ddh = (String[])showdh.get(j);
          String dhborder = "";   //边框颜色
          String dhbackcolor = ""; //标题背景颜色
          String dhfont = "";    //导航字体样式
          String colormodel = "0";   //标题颜色
         
          String dhcontent = "";
         
          out.println("<div style=/"height:20;width=100%;border:"+dhborder+" 1px solid;cursor:nw-resize;/" class=/"dragLayer/" id=/"win"+ddh[0]+"/" onmousedown=/"movestart('win"+ddh[0]+"')/"   onmousemove=/"moving('win"+ddh[0]+"')/"   onmouseup=/"moveend('win"+ddh[0]+"')/">");
          out.println("<div class=/"dragHeader/" style=/"float:left;background-color:"+dhbackcolor+"/">");
          out.println("<div style=/"float:left/">"+dhfont+"</div>");
          out.println("<div style=/"float:none/"></div>");
          out.println("<div style=/"float:right/"><span onClick=/"return dd('"+colormodel+"','"+ddh[0]+"','"+stuid+"','"+lessionid+"','"+classid+"','"+ddh[1]+"','"+frame_id+"');/">编辑</span> | <span onClick=/"return delmodel('"+ddh[0]+"')/">删除</span></div>");
          out.println("</div>");
          out.println("<div class=/"content/" id='hh"+ddh[0]+"'>"+dhcontent+"</div>");
          out.println("</div>");  
     }
   }
   %>

<!--end-->

<!--下面的是右边的模块静态时候的页面begin-->
     <div style="height:20; width:100%" class="dragLayer" id="win4">
        <div class="dragHeader">
         <div style="float:left">网站公告</div>
      <div style="float:none"></div>
      <div style="float:right"><span class="min">0</span><span class="close">r</span></div>
     </div>
     <div class="content"><hello:affiche1/></div>
     </div>
     <!------>
    <div style="height:20; width:100%" class="dragLayer" id="win5">
        <div class="dragHeader">
        <div style="float:left">邮件列表</div>
      <div style="float:none"></div>
      <div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
     </div>
     <div class="content"><hello:email1/></div>
    </div>
    <!------>
    <div style="height:20; width:100%" class="dragLayer" id="win6">
        <div class="dragHeader">
        <div style="float:left">在线调查</div>
      <div style="float:none"></div>
      <div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
     </div>
     <div class="content"><hello:subject1/></div>
    </div>
    <!------>
    <div style="height:20; width:100%" class="dragLayer" id="win7">
        <div class="dragHeader">
        <div style="float:left">友情链接</div>
      <div style="float:none"></div>
      <div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
     </div>
     <div class="content"><hello:link1 /></div>
    </div>

<!--右边的模块静态时候的页面end-->
   </div>
<!-- end right -->
</div>

<!--div框架结束-->
<iframe src="http://www.ssdate.cn/foot.htm" width=960 height=100> </iframe>
--------------------------------------------------------------------------------------------

style.css

<!--   /*网站模块拖动效果CSS样式*/

DIV.dragHeader{
width:100%; height:20px ;
line-height:20px;
background-color:#8FACBC;   /*模块标题背景颜色 */
color:#FFFFFF;
}
DIV.dragLayer{
border:1px solid #369;
background-color:#D0DDE3;   /*模块内容背景颜色*/
margin-bottom:10px;
}
DIV.dragLayer_over{
border:1px solid #C79810;
background-color:#C79810;
filter:alpha(opacity=80);
-moz-opacity:0.8; /* Moz + FF */
opacity: 0.8; /* 支持CSS3的浏览器(FF 1.5也支持)*/
}
DIV.clone_dragLayer_over{
border:1px dashed #FA0;
background-color:#C79810;
filter:alpha(opacity=80);
-moz-opacity:0.8; /* Moz + FF */
opacity: 0.8; /* 支持CSS3的浏览器(FF 1.5也支持)*/
margin-bottom:10px;
}

DIV.dragHeader_over{
width:100%; height:20px ; line-height:20px; background-color:#C79810;
}

SPAN.min,SPAN.close{cursor:pointer;font-family:Webdings}
#container{margin:5px;width=910;
    padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 210px;}                /*DIV距离边的距离*/
#leftcontainer{float:left;width:60%;margin:5px;}
#rightcontainer{float:left; width:30%;margin:5px;}

#rightcontainer div{float:right}
DIV.content{width:100%; padding:4px}

-----------------------------------------------------------------------------------------------

div.js

 

var XMLHttpReq;
   //创建XMLHttpRequest对象      
    function createXMLHttpRequest() {

   if(window.XMLHttpRequest) { //Mozilla 浏览器
    XMLHttpReq = new XMLHttpRequest();
   }
   else if (window.ActiveXObject) { // IE浏览器
    try {
     XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
     try {
      XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
     } catch (e) {}
    }
   }
}
//----------------------------------
var CoolDrag={
obj : null, //目标对象
cloneobj : null, //拖动对象
container : null, //容器
dragged : false, //拖动标志
shadow: null, //阴影

init:function(id){
CoolDrag.container = $(id);
   //var cooldrag = CoolDrag.read("cooldrag");
   if(cooldrag != ""){//读取cookie
    var subcontainer = cooldrag.split("|");
    alert(subcontainer);
    for(var i=0 ; i < subcontainer.length; i++){
     var subcontainerItem = subcontainer[i].split(":");
     if($(subcontainerItem[0])){
      var items = subcontainerItem[1].split(",");
      for(var j=0; j< items.length; j++){
       if($(items[j])) $(subcontainerItem[0]).appendChild($(items[j]));
      }
     }
    }
   }
   cleanWhitespace(CoolDrag.container)//清除空白节点
   var collection = CoolDrag.container.getElementsByTagName("DIV");
   for(var i = 0; i < collection.length; i++){
    if(collection[i].className == "dragLayer"){
     var o = collection[i].firstChild;  
     SavedObject.push([o.parentNode.id,1,o.parentNode.style.height]);
     o.onmousedown = CoolDrag.start;
    }
   }
   document.onmousemove = CoolDrag.drag;
   document.onmouseup = CoolDrag.end;
},

start:function(e){
   if(!e) e = window.event;
   var obj = getT(e);
   if(obj.className == "min"){
    CoolDrag.min(e);
    return;
   }else if(obj.className == "close"){
    CoolDrag.close(e);
    return;
   }else{
    if(obj.className != "dragHeader") obj = obj.parentNode;
   }
   CoolDrag.dragged = true;
   CoolDrag.obj = obj.parentNode;
   CoolDrag.cloneobj = CoolDrag.obj.cloneNode(true);
   document.body.appendChild(CoolDrag.cloneobj);
   CoolDrag.shadow = document.createElement("DIV");
   document.body.appendChild(CoolDrag.shadow);
   with(CoolDrag.cloneobj.style){
    position = "absolute";
    zIndex = 1000;
    left = getRealLeft(CoolDrag.obj) + "px";
    top = getRealTop(CoolDrag.obj) + "px";
   }
   with(CoolDrag.shadow.style){
    position = "absolute";
    zIndex = 999;
    left = getRealLeft(CoolDrag.obj) + 4 + "px";
    top = getRealTop(CoolDrag.obj) + 4 + "px";
    width = CoolDrag.obj.offsetWidth + "px";
    height = CoolDrag.obj.offsetHeight + "px";
    backgroundColor = "#ccc";
    if(navigator.userAgent.indexOf("Gecko") != -1)
     MozOpacity = "0.5";
    else if(navigator.userAgent.indexOf("MSIE") != -1)
     filter = "alpha(opacity=50)";
   }


   CoolDrag.cloneobj.initMouseX = getMouseX(e);
   CoolDrag.cloneobj.initMouseY = getMouseY(e);
   CoolDrag.cloneobj.initoffsetL = getRealLeft(CoolDrag.obj);
   CoolDrag.cloneobj.initoffsetY = getRealTop(CoolDrag.obj);
   //change style
   CoolDrag.cloneobj.firstChild.className="dragHeader_over";
   CoolDrag.cloneobj.className = "dragLayer_over";
   CoolDrag.obj.className="clone_dragLayer_over";
},

drag:function(e){
   if(!CoolDrag.dragged||CoolDrag.obj==null)return;
   if(!e) e = window.event;
   var currenX = getMouseX(e);
   var currenY = getMouseY(e);

   if(CoolDrag.cloneobj.initoffsetL +   currenX - CoolDrag.cloneobj.initMouseX > getRealLeft(CoolDrag.container))
    CoolDrag.cloneobj.style.left = (CoolDrag.cloneobj.initoffsetL +   currenX - CoolDrag.cloneobj.initMouseX) + "px";
   else
    CoolDrag.cloneobj.style.left = getRealLeft(CoolDrag.container) + "px";
   if(CoolDrag.cloneobj.initoffsetY +   currenY - CoolDrag.cloneobj.initMouseY > getRealTop(CoolDrag.container))
    CoolDrag.cloneobj.style.top = (CoolDrag.cloneobj.initoffsetY +   currenY - CoolDrag.cloneobj.initMouseY) + "px";
   else
    CoolDrag.cloneobj.style.top = getRealTop(CoolDrag.container) + "px";

   var collection = CoolDrag.container.getElementsByTagName("DIV");
   var finded = false;
   for(var i = 0; i < collection.length; i++){
    var o = collection[i];
    if(o.className == "dragLayer"){
     if(((getRealLeft(o) <= CoolDrag.cloneobj.offsetLeft &&   getRealLeft(o) + o.offsetWidth >= CoolDrag.cloneobj.offsetLeft) ||   
     (getRealLeft(o) <= CoolDrag.cloneobj.offsetLeft + CoolDrag.cloneobj.offsetWidth &&
     getRealLeft(o) + o.offsetWidth >= CoolDrag.cloneobj.offsetLeft + CoolDrag.cloneobj.offsetWidth)) &&
        getRealTop(o) <= CoolDrag.cloneobj.offsetTop && getRealTop(o) + o.offsetHeight >= CoolDrag.cloneobj.offsetTop)
     {
      //window.status = getRealTop(o.parentNode)+"|"+(CoolDrag.cloneobj.offsetTop - 8);
      if(getRealTop(o.parentNode) >= CoolDrag.cloneobj.offsetTop - 8){
       o.parentNode.insertBefore(CoolDrag.obj,o);
      }else{
       if(o.nextSibling)
        o.parentNode.insertBefore(CoolDrag.obj,o.nextSibling);
       else
        o.parentNode.appendChild(CoolDrag.obj);
      }
      finded = true;
      break;
     }
    }
   }

   if(!finded){
    for(var i = 0; i < CoolDrag.container.childNodes.length; i++){
     var o = CoolDrag.container.childNodes[i];
     if(getRealLeft(o) <= CoolDrag.cloneobj.offsetLeft &&   getRealLeft(o) + o.offsetWidth >= CoolDrag.cloneobj.offsetLeft)
      o.appendChild(CoolDrag.obj);
    }
   }
   with(CoolDrag.shadow.style){
    left = (CoolDrag.cloneobj.offsetLeft + 4) + "px";
    top = (CoolDrag.cloneobj.offsetTop + 4) + "px";
   }
   //document.title = CoolDrag.cloneobj.style.left + "|" + CoolDrag.shadow.style.left;
},

end:function(e){
   if(!CoolDrag.dragged)return;
   CoolDrag.obj.className = "dragLayer";
   CoolDrag.dragged = false;
   CoolDrag.shadow.parentNode.removeChild(CoolDrag.shadow);
   CoolDrag.timer = CoolDrag.repos(150,15);

   //保存cookie
   var str="";
   for(var i=0; i<CoolDrag.container.childNodes.length; i++){
    var o = CoolDrag.container.childNodes[i];
    if(i>0)str += "|";
    str += o.id + ":";
    for(var j=0; j < o.childNodes.length; j++){
     if(j>0)str += ",";
     str += o.childNodes[j].id ;
    }
   }
   CoolDrag.save("cooldrag",str,24);
},
repos:function(aa,ab){
   //var f=CoolDrag.obj.filters.alpha.opacity;
   var tl=getRealLeft(CoolDrag.cloneobj);
   var tt=getRealTop(CoolDrag.cloneobj);
   var kl=(tl-getRealLeft(CoolDrag.obj))/ab;
   var kt=(tt-getRealTop(CoolDrag.obj))/ab;
   //var kf=f/ab;
   return setInterval(function(){if(ab<1){
         clearInterval(CoolDrag.timer);
         CoolDrag.cloneobj.parentNode.removeChild(CoolDrag.cloneobj);
         CoolDrag.obj=null;
         return;
        }
       ab--;
       tl-=kl;
       tt-=kt;
       //f-=kf;
       CoolDrag.cloneobj.style.left=parseInt(tl)+"px";
       CoolDrag.cloneobj.style.top=parseInt(tt)+"px";
       //CoolDrag.tdiv.filters.alpha.opacity=f;
      }
,aa/ab)
},
min:function(e){
   if(!e) e = window.event;
   var obj = getT(e);
   var rootObj = obj.parentNode.parentNode.parentNode;
   var id = rootObj.id;
   if(SavedObject.getStatus(id)[1]){
    SavedObject.setStatus(id,0);
    rootObj.style.height = "20px";
    rootObj.childNodes[1].style.display = 'none';
   }else{
    SavedObject.setStatus(id,1);
    rootObj.lastChild.style.display = '';
    rootObj.style.height = SavedObject.getStatus(id)[2];
   }
   obj.innerHTML = obj.innerHTML==0 ? 2 :0;
},

close:function(e){
   if(!e) e = window.event;
   var obj = getT(e);
   var rootObj = obj.parentNode.parentNode.parentNode;
   rootObj.parentNode.removeChild(rootObj);
},
save:function(name, value, hours){
   var expire = "";
   if(hours != null)
   {
   expire = new Date((new Date()).getTime() + hours * 3600000);
   expire = "; expires=" + expire.toGMTString();
   }
   dididadiv=name   + "=" + escape(value) + expire;
   createXMLHttpRequest();
   // var url="/Marketing/Market_Center/website/deal.asp?uid=1&config="+dididadiv;
    var url="../deal.jsp?uid=1&config="+dididadiv; //这里是AJAX请求deal.jsp保存布局cookie值
    XMLHttpReq.open("GET", url, true);
    XMLHttpReq.onreadystatechange = seekprocessResponse;//指定响应函数
    XMLHttpReq.send(null);  
// document.cookie = name   + "=" + escape(value) + expire;
},
read:function(name){
   var cookieValue = "";
   var search = name + "=";
   if(document.cookie.length > 0)
   {
   offset = document.cookie.indexOf(search);
   if (offset != -1)
   {
     offset += search.length;
     end = document.cookie.indexOf(";", offset);
     if (end == -1) end = document.cookie.length;
     cookieValue = unescape(document.cookie.substring(offset, end))
   }
   }
   return cookieValue;
}
}

function $(id){
return document.getElementById(id);
}
// 处理返回信息函数-
    function seekprocessResponse() {
    if (XMLHttpReq.readyState == 4) { // 判断对象状态  
        if (XMLHttpReq.status == 200) { // 信息已经成功返回,开始处理信息         
     //seekDisplayHot();    
     //setTimeout("sendRequest()", 1000);
            } else { //页面不正常
                window.alert("您所请求的页面有异常。");
            }
        }
    }
function getT(e){
return e.target || e.srcElement;
}

function getMouseX(e){
return e.pageX ? e.pageX : e.clientX + document.body.scrollLeft - document.body.clientLeft;
}

function getMouseY(e){
return e.pageY ? e.pageY : e.clientY + document.body.scrollTop   - document.body.clientTop;
}

function getRealLeft(o){
var l = 0;
while(o){
   l += o.offsetLeft - o.scrollLeft;
   o = o.offsetParent;
}
return(l);
}

function getRealTop(o){
var t = 0;
while(o){
   t += o.offsetTop - o.scrollTop;
   o = o.offsetParent;
}
return(t);
}

function cleanWhitespace(node) {
      var notWhitespace = //S/;
      for (var i=0; i < node.childNodes.length; i++) {
          var childNode = node.childNodes[i];
          if ((childNode.nodeType == 3)&&(!notWhitespace.test(childNode.nodeValue))) {
              node.removeChild(node.childNodes[i]);
              i--;
          }
          if (childNode.nodeType == 1) {
              cleanWhitespace(childNode);
          }
      }
}

var SavedObject={
elements : new Array(),
setStatus : function(id,s){
   for(var i=0;i<SavedObject.elements.length;i++){
    if(SavedObject.elements[i][0]==id){
     SavedObject.elements[i][1]=s;
     break;
    }
   }
},
getStatus : function(id){
   for(var i=0;i<SavedObject.elements.length;i++){
    if(SavedObject.elements[i][0]==id)return SavedObject.elements[i];
   }
},
push : function(o){
   SavedObject.elements[SavedObject.elements.length]=o;
}
}

-------------------------------------------------------------------------------

deal.jsp


<%@ page contentType="text/html; charset=GBK" language="java" import="Logistics.common.sqlMethod,java.util.ArrayList" errorPage="" %>

<%
String config = request.getParament("dididadiv");// 网页布局cookie值
Strring uid = request.getParament("uid"); //用户ID
sqlMtdhod dbo = new sqlMethod();
String sql = "select u_ui from team_users where u_id="+uid;
ArrayList list = dbo.rsResult(sql);
if(list.size>0)   //如果布局存在则更新布局
{
    //更新页面布局COOKIE值
    sql = "update team_users set u_ui='"+config+"' where u_id='"+uid+"'";
     dbo.bUpdate(upsql);
}else{      //添加页面布局COOKIE值
    sql = "insert into team_users(u_ui) values('"+config+"')";
    dbo.bInsert(sql);
}
%>

说了这么多,放图演示一下,效果大致就是这样子,比较难看,大家参考下: