当前位置： 代码迷 >> Web前端 >> div 拖动 搬动
  详细解决方案

div 拖动 搬动

热度：463   发布时间：2012-08-27 21:21:56.0
div 拖动 移动

源代码如下：

?

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta http-equiv="content-language" content="zh-cn" />
<title>安博中程企业培训,企业内训,专注于android培训,软考培训,软件开发,软件工程,嵌入式,UI设计,重构,架构等IT企业培训</title>
<meta name="keywords" content="企业培训,企业内训,android培训,软考培训,it企业培训"/>
<meta name="description" content="安博中程企业培训多年来致力于android培训,软考培训,嵌入式,UI设计,重构,架构,软件测试,需求分析,软件开发,数据库,国防军工等IT高端技术的企业培训、企业内训,一直在行业内处于领先地位,所开企业内训或公开课如软考培训,android应用开发培训,软件工程培训,敏捷开发,嵌入式培训,项目管理及国防军工的电子产品设计和信息化培训等授课讲师均是知名专家,行业内领军人物,已成为中国高端培训第一品牌."/>
<script type="text/javascript">
<!--
var IE=false,FF=false,W=window,D=document,H,B,GET="getElementsByTagName",GEI="getElementById",qq=0;
function fold(){
??? var e;
??? e=fixE(e);
??? if(e)element=fixElement(e);
??? element=element.parentNode.parentNode;
??? element.className=element.className.indexOf("hide")>0?"module":"module hide";
}
var Drag={
draging : false,
x : 0,
y : 0,
element : null,
fDiv : null,
ghost : null,
addEvent : function(){var a=D[GET]("li");for(var i=a.length-1;i>-1;i--)if(a[i].className=="module")a[i].onmousedown=Drag.dragStart;},
ix:2,iy:7,
ox:6,oy:7,
fx:6,fy:6,
dragStart : function (e){
?? if(Drag.draging)return;
?? var e;
?? e=fixE(e);
?? if(e)element=fixElement(e);

?? D.getElementById("aaa").innerHTML=element.parentNode.offsetTop+ ","+element.parentNode.offsetHeight;
?? //测试
?? if(element.className!="title")return;
?? element=element.parentNode;
?? Drag.element=element;
?? //以上获得当前移动的模块
?? Drag.x=e.layerX?e.layerX+Drag.fx:(IE?e.x+Drag.ix:e.offsetX+Drag.ox);
?? Drag.y=e.layerY?e.layerY+Drag.fy:(IE?e.y+Drag.iy:e.offsetY+Drag.oy);
?? //鼠标相对于模块的位置
?? Drop.measure();
?? if(e.layerX){Drag.floatIt(e);Drag.drag(e);}//fix FF
?? B.style.cursor="move";
?? D.onmousemove=Drag.drag;
?? D.ondragstart=function(){window.event.returnValue = false;}
?? D.onselectstart=function(){window.event.returnValue = false;};
?? D.onselect=function(){return false};
?? D.onmouseup=element.onmouseup=Drag.dragEnd;
?? element.onmousedown=null;
},
drag : function (e){
?? var e;
?? e=fixE(e);
?? if(!Drag.fDiv)Drag.floatIt(e);//for IE & Opera
?? var x=e.clientX,y=e.clientY;
?? Drag.fDiv.style.top=y+H.scrollTop-Drag.y+"px";
?? Drag.fDiv.style.left=x+H.scrollLeft-Drag.x+"px";
?? Drop.drop(x,y);
?? //statu(e);
},
dragEnd : function (e){
?? B.style.cursor="";
?? D.ondragstart=D.onmousemove=D.onselectstart=D.onselect=D.onmouseup=null;
?? Drag.element.onmousedown=Drag.dragStart;
?? if(!Drag.draging)return;
?? Drag.ghost.parentNode.insertBefore(Drag.element,Drag.ghost);
?? Drag.ghost.parentNode.removeChild(Drag.ghost);
?? B.removeChild(Drag.fDiv);
?? Drag.fDiv=null;
?? Drag.draging=false;
?? Drop.init(D[GEI]("container"));
},
floatIt : function(e){
?? var e,element=Drag.element;
?? var ghost=D.createElement("LI");
?? Drag.ghost=ghost;
?? ghost.className="module ghost";
?? ghost.style.height=element.offsetHeight-2+"px";
?? element.parentNode.insertBefore(ghost,element);
?? //创建模块占位框
?? var fDiv=D.createElement("UL");
?? Drag.fDiv=fDiv;
?? fDiv.className="float";
?? B.appendChild(fDiv);
?? fDiv.style.width=ghost.parentNode.offsetWidth+"px";
?? fDiv.appendChild(element);
?? //创建容纳模块的浮动层
?? Drag.draging=true;
}
}
var Drop={
root : null,
index : null,
column : null,
init : function(it){
?? if(!it)return;
?? Drop.root=it;
?? it.firstItem=it.lastItem=null;
?? var a=it[GET]("ul");
?? for(var i=0;i<a.length;i++){
?????? if(a[i].className!="column")continue;
?????? if(it.firstItem==null){
?????????? it.firstItem=a[i];
?????????? a[i].previousItem=null;
?????? }else{
?????????? a[i].previousItem=a[i-1];
?????????? a[i-1].nextItem=a[i];
?????? }
????? a[i].nextItem=null;
????? it.lastItem=a[i];
????? a[i].index=i;
????? a[i].firstItem=a[i].lastItem=null;
????? var b=a[i][GET]("li");
????? for(var j=0;j<b.length;j++){
??? ??? ? if(b[j].className.indexOf("module")==-1)continue;
??? ??? ? if(a[i].firstItem==null){
??? ??? ??? ? a[i].firstItem=b[j];
??? ??? ??? ? b[j].previousItem=null;
??? ??? ? }else{
??? ??? ??? ? b[j].previousItem=b[j-1];
??? ??? ??? ? b[j-1].nextItem=b[j];
??? ??? ? }
??? ??? ? b[j].nextItem=null;
??? ??? ? a[i].lastItem=b[j];
??? ??? ? b[j].index=i+","+j;
????? }
?? }
},
measure : function(){
?? if(!Drop.root)return;
?? var currentColumn=Drop.root.firstItem;
?? while(currentColumn){
??? var currentModule=currentColumn.firstItem;
??? while(currentModule){
???? currentModule.minY=currentModule.offsetTop;
???? currentModule.maxY=currentModule.minY+currentModule.offsetHeight;
???? currentModule=currentModule.nextItem;
??? }
??? currentColumn.minX=currentColumn.offsetLeft;
??? currentColumn.maxX=currentColumn.minX+currentColumn.offsetWidth;
??? currentColumn=currentColumn.nextItem;
?? }
?? Drop.index=Drag.element.index;
},
drop : function(x,y){
?? if(!Drop.root)return;
?? var x,y,currentColumn=Drop.root.firstItem;
?? while(x>currentColumn.maxX)if(currentColumn.nextItem)currentColumn=currentColumn.nextItem;else break;
?? var currentModule=currentColumn.lastItem;
?? if(currentModule)while(y<currentModule.maxY){
??? if(y>currentModule.minY-12){
???? if(Drop.index==currentModule.index)return;
???? Drop.index=currentModule.index;
???? if(currentModule.index==Drag.element.index){if(currentModule.nextItem)currentModule=currentModule.nextItem;else break;}
???? currentColumn.insertBefore(Drag.ghost,currentModule);
???? Drop.column=null;
???? window.status=qq++;
???? return;
??? }else if(currentModule.previousItem)currentModule=currentModule.previousItem;else return;
?? }
?? if(Drop.column==currentColumn.index)return;
?? currentColumn.appendChild(Drag.ghost);
?? Drop.index=0;
?? Drop.column=currentColumn.index;
?? window.status=qq++;
}
}
var webNote={
obj : null,
canEdit : function(e){
?? var e,element;
?? e=fixE(e);
?? element=fixElement(e);
?? if(element.className!='webNote')return;
?? if(typeof element.contentEditable!="undefined"){
??? element.contentEditable=true;
??? element.style.borderColor='red';
??? element.focus();
??? webNote.obj=element;
?? }
},
cannotEdit : function(){
?? if(!webNote.obj)return;
?? if(typeof webNote.obj.contentEditable!="undefined"){
??? webNote.obj.style.borderColor='#ffffe0';
??? webNote.obj.contentEditable=false;
??? webNote.obj=null;
?? }
}
}
function fixE(e){var e;e=e?e:(window.event?window.event:null);return e}
function fixElement(e){var e;return e.target?(e.target.nodeType==3?e.target.parentNode:e.target):e.srcElement;}
onload=function(){
??? B=D[GET]("body")[0];
??? H=D[GET]("html")[0];
??? Drop.init(D[GEI]("container"));
??? Drag.addEvent();
}
function statu(e){
??? var e,element;
??? element=fixElement(e);
??? var aa=D.getElementById("aaa");
??? aa.innerHTML="e.xy:("+e.x+","+e.y+")<br/>e.offsetXY:("+e.offsetX+","+e.offsetY+")<br/>e.clientXY:("+e.clientX+","+e.clientY+")<br/>element.offsetLeftTop:("+element.offsetLeft+","+element.offsetTop+")<br/>e.layerXY:("+e.layerX+","+e.layerY+")";
}
//-->
</script>
<style type="text/css">
body,table,td,th,input,textarea,button,select{font:13px/16px Verdana,"宋体",sans-serif;}
table{border-collapse:collapse;}
p{margin:0px;}
.container{margin:8px;}
.column{width:33%;margin:0px;padding:0px;float:left;overflow:hidden;}
.module{margin:5px;padding:0px;border:1px solid #dcd;position:relative;background-color:white;list-style:none;}
.title{background-color:#edf;padding:1px 0px;width:100%;overflow:hidden;cursor:move;z-index:0;font-weight:bold;}
.cont{padding:3px;overflow:hidden;}
.hide .cont{display:none;}
.pageTitle{font-weight:bold;text-align:center;}
input.pageTitle{display:none;border:0px;padding:0px;width:100%;}
.webNote{background-color:#ffffe0;border:1px solid #ffffe0;}
textarea.webNote{display:none;overflow:hidden;padding:0px;border:0px;padding:0px;}
.ghost{border:1px dashed red;}
.float{position:absolute;z-index:100;margin:0px;padding:0px;overflow:hidden;list-style:none;-moz-opacity:.75;filter:Alpha(opacity=75);}
</style>

</head>
<body>
<center><span class="pageTitle" onClick="with(this.nextSibling){value=this.innerHTML;style.display='block';focus()};this.style.display='none';">You can input a topic here!</span><input class="pageTitle" onBlur="with(this.previousSibling){D.title=innerHTML=this.value?this.value:'Demo';style.display='block';};this.style.display='none'" /></center>

<div class="container" id="container">
<ul class="column">
?? <li class="module">
??? <div class="title"><span onClick="fold()">+</span>&nbsp;Coodinate</div>
??? <div class="cont" id="aaa">content</div>
?? </li>
?? <li class="module">
??? <div class="title"><span onClick="fold()">+</span>&nbsp;contentEditable</div>
??? <div class="cont" onClick="alert('this.contentEditable:'+this.contentEditable)">click here</div>
?? </li>
?? <li class="module">
??? <div class="title"><span onClick="fold()">+</span>&nbsp;long long ago</div>
??? <div class="cont">安博中程企业培训多年来致力于android培训,软考培训,嵌入式,UI设计,重构,架构,软件测试,需求分析,软件开发,数据库,国防军工等IT高端技术的企业培训、企业内训,一直在行业内处于领先地位,所开企业内训或公开课如软考培训,android应用开发培训,软件工程培训,敏捷开发,嵌入式培训,项目管理及国防军工的电子产品设计和信息化培训等授课讲师均是知名专家,行业内领军人物,已成为中国高端培训第一品牌.</div>
?? </li>
</ul>

<ul class="column">
?? <li class="module">
??? <div class="title"><span onClick="fold()">+</span>&nbsp;this.parentNode</div>
??? <div class="cont"><button onClick="alert(this.parentNode.parentNode.parentNode.innerHTML)">parentNode</button></div>
?? </li>
?? <li class="module">
??? <div class="title"><span onClick="fold()">+</span>&nbsp;webNote</div>
??? <div class="cont"><div class="webNote" onblur="webNote.cannotEdit()" onClick="webNote.canEdit(event)">You can note something here.<br/><a href="http://www.miiceic.org.cn/">中程在线</a><br /><a href="http://www.miiceic.org.cn/">企业培训</a><br /><a href="http://www.amboedu.com/">职业教育</a><br /><a href="http://www.ciitn.com/">信息产业培训网</a></div><textarea class="webNote"></textarea></div>
?? </li>
?? <li class="module">
??? <div class="title"><span onClick="fold()">+</span>&nbsp;Google</div>
??? <div class="cont"><center><a href="http://jjklmm.iteye.com/" style="font:bold 31px/2 Arial;">http://jjklmm.iteye.com/</a></center></div>
?? </li>
</ul>

<ul class="column">
?? <li class="module">
??? <div class="title"><span onClick="fold()">+</span>&nbsp;pia~~</div>
??? <div class="cont"><a href="http://www.miiceic.org.cn/">中程在线</a> <a href="http://www.miiceic.org.cn/">企业培训</a> <a href="http://www.amboedu.com/">职业教育</a> <a href="http://www.ciitn.com/">信息产业培训网</a></div>
?? </li>
?? <li class="module">
??? <div class="title"><span onClick="fold()">+</span>&nbsp;biu~~</div>
??? <div class="cont"><a href="http://www.miiceic.org.cn/">中程在线</a><br /><a href="http://www.miiceic.org.cn/">企业培训</a><br /><a href="http://www.amboedu.com/">职业教育</a><br /><a href="http://www.ciitn.com/">信息产业培训网</a></div>
?? </li>
?? <li class="module">
??? <div class="title"><span onClick="fold()">+</span>&nbsp;无话可说</div>
??? <div class="cont" id="bbb"><a href="http://www.miiceic.org.cn/">中程在线</a> <a href="http://www.miiceic.org.cn/">企业培训</a> <a href="http://www.amboedu.com/">职业教育</a> <a href="http://www.ciitn.com/">信息产业培训网</a></div>
?? </li>
</ul>

</div>
<div style="font-size:10px;line-height:14px;clear:both;margin:6px 3%;text-align:center;border:1px solid #eee;">&copy;2011 http://jjklmm.iteye.com/</div>
</body>
</html>

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.