<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>JavaScript模块随意拖动</title>
<styletype="text/css">
html{
width:100%;
overflow-x:hidden;
}
body{
font-family:TrebuchetMS,LucidaSansUnicode,Arial,sans-serif;
width:100%;
margin:0px;
padding:0px;
text-align:center;
background-color:#E2EBED;
font-size:0.7em;
overflow-x:hidden;
}
#mainContainer{
width:600px;
margin:0auto;
text-align:left;
background-color:#FFF;
}
h4{
margin:0px;
}
p{
margin-top:5px;
}
#dragableElementsParentBox{
padding:10px;
}
.smallArticle,.bigArticle{
float:left;
border:1pxsolid#000;
background-color:#DDD;
padding:2px;
margin-right:10px;
margin-bottom:5px;
}
.smallArticleimg,.bigArticleimg{
float:left;
padding:5px;
}
.smallArticle.rightImage,.bigArticle.rightImage{
float:right;
}
.smallArticle{
width:274px;
}
.bigArticle{
width:564px;
}
.clear{
clear:both;
}
#rectangle{
float:left;
border:1pxdotted#F00;
background-color:#FFF;
}
#insertionMarker{
width:6px;
position:absolute;
display:none;
}
#insertionMarkerimg{
float:left;
}
#dragDropMoveLayer{
position:absolute;
display:none;
border:1pxsolid#000;
filter:alpha(opacity=50);
opacity:0.5;
}
</style>
<scripttype="text/javascript">
varrectangleBorderWidth=2;
varuseRectangle=false;
varautoScrollSpeed=4;
functionsaveData()
{
varsaveString="";
for(varno=0;no<dragableObjectArray.length;no++){
if(saveString.length>0)saveString=saveString+';';
ref=dragableObjectArray[no];
saveString=saveString+ref['obj'].id;
}
alert(saveString);
}
vardragableElementsParentBox;
varopera=navigator.appVersion.indexOf('Opera')>=0?true:false;
varrectangleDiv=false;
varinsertionMarkerDiv=false;
varmouse_x;
varmouse_y;
varel_x;
varel_y;
vardragDropTimer=-1;
vardragObject=false;
vardragObjectNextObj=false;
vardragableObjectArray=newArray();
vardestinationObj=false;
varcurrentDest=false;
varallowRectangleMove=true;
varinsertionMarkerLine;
vardragDropMoveLayer;
varautoScrollActive=false;
vardocumentHeight=false;
vardocumentScrollHeight=false;
vardragableAreaWidth=false;
functiongetTopPos(inputObj)
{
varreturnValue=inputObj.offsetTop;
while((inputObj=inputObj.offsetParent)!=null){
if(inputObj.tagName!='HTML')returnValue+=inputObj.offsetTop;
}
returnreturnValue;
}
functiongetLeftPos(inputObj)
{
varreturnValue=inputObj.offsetLeft;
while((inputObj=inputObj.offsetParent)!=null){
if(inputObj.tagName!='HTML')returnValue+=inputObj.offsetLeft;
}
returnreturnValue;
}
functioncancelSelectionEvent()
{
if(dragDropTimer>=0)returnfalse;
returntrue;
}
functiongetObjectFromPosition(x,y)
{
varheight=dragObject.offsetHeight;
varwidth=dragObject.offsetWidth;
varindexCurrentDragObject=-5;
for(varno=0;no<dragableObjectArray.length;no++){
ref=dragableObjectArray[no];
if(ref['obj']==dragObject)indexCurrentDragObject=no;
if(no<dragableObjectArray.length-1&&dragableObjectArray[no+1]['obj']==dragObject)indexCurrentDragObject=no+1;
if(ref['obj']==dragObject&&useRectangle)continue;
if(x>ref['left']&&y>ref['top']&&x<(ref['left']+(ref['width']/2))&&y<(ref['top']+ref['height'])){
if(!useRectangle&&dragableObjectArray[no]['obj']==dragObject)return'self';
if(indexCurrentDragObject==(no-1))return'self';
returnArray(dragableObjectArray[no],no);
}
if(x>(ref['left']+(ref['width']/2))&&y>ref['top']&&x<(ref['left']+ref['width'])&&y<(ref['top']+ref['height'])){
if(no<dragableObjectArray.length-1){
if(no==indexCurrentDragObject||(no==indexCurrentDragObject-1)){
return'self';
}
if(dragableObjectArray[no]['obj']!=dragObject){
returnArray(dragableObjectArray[no+1],no+1);
}else{
if(!useRectangle)return'self';
if(no<dragableObjectArray.length-2)returnArray(dragableObjectArray[no+2],no+2);
}
}else{
if(dragableObjectArray[dragableObjectArray.length-1]['obj']!=dragObject)return'append';
}
}
if(no<dragableObjectArray.length-1){
if(x>(ref['left']+ref['width'])&&y>ref['top']&&y<(ref['top']+ref['height'])&&y<dragableObjectArray[no+1]['top']){
returnArray(dragableObjectArray[no+1],no+1);
}
}
}
if(x>ref['left']&&y>(ref['top']+ref['height']))return'append';
returnfalse;
}
functioninitDrag(e)
{
if(document.all)e=event;
mouse_x=e.clientX;
mouse_y=e.clientY;
if(!documentScrollHeight)documentScrollHeight=document.documentElement.scrollHeight+100;
el_x=getLeftPos(this)/1;
el_y=getTopPos(this)/1;
dragObject=this;
if(useRectangle){
rectangleDiv.style.width=this.clientWidth-(rectangleBorderWidth*2)+'px';
rectangleDiv.style.height=this.clientHeight-(rectangleBorderWidth*2)+'px';
rectangleDiv.className=this.className;
}else{
insertionMarkerLine.style.width='6px';
}
dragDropTimer=0;
dragObjectNextObj=false;
if(this.nextSibling){
dragObjectNextObj=this.nextSibling;
if(!dragObjectNextObj.tagName)dragObjectNextObj=dragObjectNextObj.nextSibling;
}
initDragTimer();
returnfalse;
}
functioninitDragTimer()
{
if(dragDropTimer>=0&&dragDropTimer<10){
dragDropTimer++;
setTimeout('initDragTimer()',5);
return;
}
if(dragDropTimer==10){
if(useRectangle){
dragObject.style.opacity=0.5;
dragObject.style.filter='alpha(opacity=50)';
dragObject.style.cursor='default';
}else{
varnewObject=dragObject.cloneNode(true);
dragDropMoveLayer.appendChild(newObject);
}
}
}
functionautoScroll(direction,yPos)
{
if(document.documentElement.scrollHeight>documentScrollHeight&&direction>0)return;
window.scrollBy(0,direction);
if(direction<0){
if(document.documentElement.scrollTop>0){
mouse_y=mouse_y-direction;
if(useRectangle){
dragObject.style.top=(el_y-mouse_y+yPos)+'px';
}else{
dragDropMoveLayer.style.top=(el_y-mouse_y+yPos)+'px';
}
}else{
autoScrollActive=false;
}
}else{
if(yPos>(documentHeight-50)){
mouse_y=mouse_y-direction;
if(useRectangle){
dragObject.style.top=(el_y-mouse_y+yPos)+'px';
}else{
dragDropMoveLayer.style.top=(el_y-mouse_y+yPos)+'px';
}
}else{
autoScrollActive=false;
}
}
if(autoScrollActive)setTimeout('autoScroll('+direction+','+yPos+')',5);
}
functionmoveDragableElement(e)
{
if(document.all)e=event;
if(dragDropTimer<10)return;
if(!allowRectangleMove)returnfalse;
if(e.clientY<50||e.clientY>(documentHeight-50)){
if(e.clientY<50&&!autoScrollActive){
autoScrollActive=true;
autoScroll((autoScrollSpeed*-1),e.clientY);
}
if(e.clientY>(documentHeight-50)&&document.documentElement.scrollHeight<=documentScrollHeight&&!autoScrollActive){
autoScrollActive=true;
autoScroll(autoScrollSpeed,e.clientY);
}
}else{
autoScrollActive=false;
}
if(useRectangle){
if(dragObject.style.position!='absolute'){
dragObject.style.position='absolute';
setTimeout('repositionDragObjectArray()',50);
}
}
if(useRectangle){
rectangleDiv.style.display='block';
}else{
insertionMarkerDiv.style.display='block';
dragDropMoveLayer.style.display='block';
}
if(useRectangle){
dragObject.style.left=(el_x-mouse_x+e.clientX+Math.max(document.body.scrollLeft,document.documentElement.scrollLeft))+'px';
dragObject.style.top=(el_y-mouse_y+e.clientY)+'px';
}else{
dragDropMoveLayer.style.left=(el_x-mouse_x+e.clientX+Math.max(document.body.scrollLeft,document.documentElement.scrollLeft))+'px';
dragDropMoveLayer.style.top=(el_y-mouse_y+e.clientY)+'px';
}
dest=getObjectFromPosition(e.clientX+Math.max(document.body.scrollLeft,document.documentElement.scrollLeft),e.clientY+Math.max(document.body.scrollTop,document.documentElement.scrollTop));
if(dest!==false&&dest!='append'&&dest!='self'){
destinationObj=dest[0];
if(currentDest!==destinationObj){
currentDest=destinationObj;
if(useRectangle){
destinationObj['obj'].parentNode.insertBefore(rectangleDiv,destinationObj['obj']);
repositionDragObjectArray();
}else{
if(dest[1]>0&&(dragableObjectArray[dest[1]-1]['obj'].offsetLeft+dragableObjectArray[dest[1]-1]['width']+dragObject.offsetWidth)<dragableAreaWidth){
insertionMarkerDiv.style.left=(getLeftPos(dragableObjectArray[dest[1]-1]['obj'])+dragableObjectArray[dest[1]-1]['width']+2)+'px';
insertionMarkerDiv.style.top=(getTopPos(dragableObjectArray[dest[1]-1]['obj'])-2)+'px';
insertionMarkerLine.style.height=dragableObjectArray[dest[1]-1]['height']+'px';
}else{
insertionMarkerDiv.style.left=(getLeftPos(destinationObj['obj'])-8)+'px';
insertionMarkerDiv.style.top=(getTopPos(destinationObj['obj'])-2)+'px';
insertionMarkerLine.style.height=destinationObj['height']+'px';
}
}
}
}
if(dest=='self'||!dest){
insertionMarkerDiv.style.display='none';
destinationObj=dest;
}
if(dest=='append'){
if(useRectangle){
dragableElementsParentBox.appendChild(rectangleDiv);
dragableElementsParentBox.appendChild(document.getElementById('clear'));
}else{
vartmpRef=dragableObjectArray[dragableObjectArray.length-1];
insertionMarkerDiv.style.left=(getLeftPos(tmpRef['obj'])+2)+tmpRef['width']+'px';
insertionMarkerDiv.style.top=(getTopPos(tmpRef['obj'])-2)+'px';
insertionMarkerLine.style.height=tmpRef['height']+'px';
}
destinationObj=dest;
repositionDragObjectArray();
}
if(useRectangle&&!dest){
destinationObj=currentDest;
}
allowRectangleMove=false;
setTimeout('allowRectangleMove=true',50);
}
functionstop_dragDropElement()
{
dragDropTimer=-1;
if(destinationObj&&destinationObj!='append'&&destinationObj!='self'){
destinationObj['obj'].parentNode.insertBefore(dragObject,destinationObj['obj']);
}
if(destinationObj=='append'){
dragableElementsParentBox.appendChild(dragObject);
dragableElementsParentBox.appendChild(document.getElementById('clear'));
}
if(dragObject&&useRectangle){
dragObject.style.opacity=1;
dragObject.style.filter='alpha(opacity=100)';
dragObject.style.cursor='move';
dragObject.style.position='static';
}
rectangleDiv.style.display='none';
insertionMarkerDiv.style.display='none';
dragObject=false;
currentDest=false;
resetObjectArray();
destinationObj=false;
if(dragDropMoveLayer){
dragDropMoveLayer.style.display='none';
dragDropMoveLayer.innerHTML='';
}
autoScrollActive=false;
documentScrollHeight=document.documentElement.scrollHeight+100;
}
functioncancelEvent()
{
returnfalse;
}
functionrepositionDragObjectArray()
{
for(varno=0;no<dragableObjectArray.length;no++){
ref=dragableObjectArray[no];
ref['left']=getLeftPos(ref['obj']);
ref['top']=getTopPos(ref['obj']);
}
documentScrollHeight=document.documentElement.scrollHeight+100;
documentHeight=document.documentElement.clientHeight;
}
functionresetObjectArray()
{
dragableObjectArray.length=0;
varsubDivs=dragableElementsParentBox.getElementsByTagName('*');
varcountEl=0;
for(varno=0;no<subDivs.length;no++){
varattr=subDivs[no].getAttribute('dragableBox');
if(opera)attr=subDivs[no].dragableBox;
if(attr=='true'){
varindex=dragableObjectArray.length;
dragableObjectArray[index]=newArray();
ref=dragableObjectArray[index];
ref['obj']=subDivs[no];
ref['width']=subDivs[no].offsetWidth;
ref['height']=subDivs[no].offsetHeight;
ref['left']=getLeftPos(subDivs[no]);
ref['top']=getTopPos(subDivs[no]);
ref['index']=countEl;
countEl++;
}
}
}
functioninitdragableElements()
{
dragableElementsParentBox=document.getElementById('dragableElementsParentBox');
insertionMarkerDiv=document.getElementById('insertionMarker');
insertionMarkerLine=document.getElementById('insertionMarkerLine');
dragableAreaWidth=dragableElementsParentBox.offsetWidth;
if(!useRectangle){
dragDropMoveLayer=document.createElement('DIV');
dragDropMoveLayer.id='dragDropMoveLayer';
document.body.appendChild(dragDropMoveLayer);
}
varsubDivs=dragableElementsParentBox.getElementsByTagName('*');
varcountEl=0;
for(varno=0;no<subDivs.length;no++){
varattr=subDivs[no].getAttribute('dragableBox');
if(opera)attr=subDivs[no].dragableBox;
if(attr=='true'){
subDivs[no].style.cursor='move';
subDivs[no].onmousedown=initDrag;
varindex=dragableObjectArray.length;
dragableObjectArray[index]=newArray();
ref=dragableObjectArray[index];
ref['obj']=subDivs[no];
ref['width']=subDivs[no].offsetWidth;
ref['height']=subDivs[no].offsetHeight;
ref['left']=getLeftPos(subDivs[no]);
ref['top']=getTopPos(subDivs[no]);
ref['index']=countEl;
countEl++;
}
}
rectangleDiv=document.createElement('DIV');
rectangleDiv.id='rectangle';
rectangleDiv.style.display='none';
dragableElementsParentBox.appendChild(rectangleDiv);
document.body.onmousemove=moveDragableElement;
document.body.onmouseup=stop_dragDropElement;
document.body.onselectstart=cancelSelectionEvent;
document.body.ondragstart=cancelEvent;
window.onresize=repositionDragObjectArray;
documentHeight=document.documentElement.clientHeight;
}
window.onload=initdragableElements;
</script>
<divid="mainContainer">
<!--STARTDRAGABLECONTENT-->
<divid="dragableElementsParentBox">
<divdragableBox="true"id="article1">
<h4>Heading1</h4>
<p>Splendidaporrooculifugitantvitantquetueri.soletiamcaecat,contrasitenderepergas,proptereaquiavismagnastipsiusetaltea?raperpurumsimulacraferunturetferiuntoculosturbantiacomposituras.</p>
</div>
<divdragableBox="true"id="article2">
<h4>Heading2</h4>
<p>Splendidaporrooculifugitantvitantquetueri.soletiamcaecat,contrasitenderepergas,proptereaquiavismagnast.</p>
</div>
<divdragableBox="true"id="article3">
<h4>Heading3</h4>
<p>Splendidaporrooculifugitantvitantquetueri.soletiamcaecat,contrasitenderepergas,proptereaquiavismagnast.</p>
</div>
<divdragableBox="true"id="article4">
<h4>Heading4</h4>
<p>Splendidaporrooculifugitantvitantquetueri.soletiamcaecat,contrasitenderepergas,proptereaquiavismagnastipsiusetaltea?raperpurumsimulacraferunturetferiuntoculosturbantiacomposituras.</p>
</div>
<divdragableBox="true"id="article5">
<h4>Heading5</h4>
<p>Splendidaporrooculifugitantvitantquetueri.soletiamcaecat,contrasitenderepergas,proptereaquiavismagnast.</p>
</div>
<divdragableBox="true"id="article6">
<h4>Heading6</h4>
<p>Splendidaporrooculifugitantvitantquetueri.soletiamcaecat,contrasitenderepergas,proptereaquiavismagnast.</p>
</div>
<divdragableBox="true"id="article7">
<h4>Heading7</h4>
<p>Splendidaporrooculifugitantvitantquetueri.soletiamcaecat,contrasitenderepergas,proptereaquiavismagnastipsiusetaltea?raperpurumsimulacraferunturetferiuntoculosturbantiacomposituras.</p>
</div>
<divdragableBox="true"id="article8">
<h4>Heading8</h4>
<p>Splendidaporrooculifugitantvitantquetueri.soletiamcaecat,contrasitenderepergas,proptereaquiavismagnastipsiusetaltea?raperpurumsimulacraferunturetferiuntoculosturbantiacomposituras.</p>
</div>
<divdragableBox="true"id="article9">
<h4>Heading9</h4>
<p>Splendidaporrooculifugitantvitantquetueri.soletiamcaecat,contrasitenderepergas,proptereaquiavismagnastipsiusetaltea?raperpurumsimulacraferunturetferiuntoculosturbantiacomposituras.</p>
</div>
<divid="clear"></div>
</div>
<!--ENDDRAGABLECONTENT-->
<inputtype="button"value="Save"onclick="saveData()">
</div>
<!--REQUIREDDIVS-->
<divid="insertionMarker">
<imgsrc="/jscss/demoimg/200906/marker_top.gif">
<imgsrc="/jscss/demoimg/200906/marker_middle.gif"id="insertionMarkerLine">
<imgsrc="/jscss/demoimg/200906/marker_bottom.gif">
</div>
<!--ENDREQUIREDDIVS-->
</head>
<body>
</body>
</html>
