首页
设计资讯
UI设计
学习教程
web标准
网站建设
设计素材
软件下载
全网设计学院

拖动DIV如何保存的问题

上一篇 |

下一篇发表时间：2007-9-9 22:49:28

<div class="text_runbox">Source Code to Run

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

body{ background-color:#36393D; font-size:12px; margin:0px; }

DIV.dragLayer{

border:1px solid #369;

background-color:#6BBA70;

margin-bottom:10px;

}

DIV.dragLayer_over{

border:1px solid #C79810;

background-color:#6BBA70;

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:#6BBA70;

filter:alpha(opacity=80);

-moz-opacity:0.8; /* Moz + FF */

opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/

margin-bottom:10px;

}

DIV.dragHeader{

width:100%; height:20px ; line-height:20px; background-color:#006E2E;

color:#FFFFFF;

}

DIV.dragHeader_over{

width:100%; height:20px ; line-height:20px; background-color:#C79810;

}

SPAN.min,SPAN.close{cursor:pointer;font-family:Webdings}

#container{margin:0px}

#leftcontainer{float:left; width:33%;}

#middlecontainer{float:left; width:34%;}

#middlecontainer div{margin-left:auto; margin-right:auto}

#rightcontainer{float:right; width:33%;}

#rightcontainer div{float:right}

DIV.content{width:100%; padding:4px}

</style>

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("|");

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();

}

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 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;

}

</script>