JavaScript模块随意拖动示例代码

复制代码代码如下:
<！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" />
<title>JavaScript模块随意拖动</title>
<style type="text/css">
html{
width:100%;
overflow-x:hidden;
}
body{
font-family: Trebuchet MS, Lucida Sans Unicode, 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:0 auto;
text-align:left;
background-color:#FFF;
}
h4{
margin:0px;
}
p{
margin-top:5px;
}
#dragableElementsParentBox{
padding:10px;
}

.smallArticle,.bigArticle{
float:left;
border:1px solid #000;
background-color:#DDD;
padding:2px;
margin-right:10px;
margin-bottom:5px;
}
.smallArticle img,.bigArticle img{
float:left;
padding:5px;
}
.smallArticle .rightImage,.bigArticle .rightImage{
float:right;
}
.smallArticle{
width:274px;
}
.bigArticle{
width:564px;
}
.clear{
clear:both;
}

#rectangle{
float:left;
border:1px dotted #F00;
background-color:#FFF;
}
#insertionMarker{
width:6px;
position:absolute;
display:none;
}
#insertionMarker img{
float:left;
}
#dragDropMoveLayer{
position:absolute;
display:none;
border:1px solid #000;
filter:alpha（opacity=50）;
opacity:0.5;
}

</style>

<script type="text/javascript">
var rectangleBorderWidth = 2;
var useRectangle = false;
var autoScrollSpeed = 4;
function saveData（）
{
var saveString = "";
for（var no=0;no<dragableObjectArray.length;no++）{
if（saveString.length>0）saveString = saveString + ";";
ref = dragableObjectArray[no];
saveString = saveString + ref["obj"].id;
}

alert（saveString）;
}
var dragableElementsParentBox;
var opera = navigator.appVersion.indexOf（"Opera"）>=0？true:false;
var rectangleDiv = false;
var insertionMarkerDiv = false;
var mouse_x;
var mouse_y;

var el_x;
var el_y;
var dragDropTimer = -1;
var dragObject = false;
var dragObjectNextObj = false;
var dragableObjectArray = new Array（）;
var destinationObj = false;
var currentDest = false;
var allowRectangleMove = true;
var insertionMarkerLine;
var dragDropMoveLayer;
var autoScrollActive = false;
var documentHeight = false;
var documentScrollHeight = false;
var dragableAreaWidth = false;
function getTopPos（inputObj）
{
var returnValue = inputObj.offsetTop;
while（（inputObj = inputObj.offsetParent）！= null）{
if（inputObj.tagName！="HTML"）returnValue += inputObj.offsetTop;
}
return returnValue;
}

function getLeftPos（inputObj）
{
var returnValue = inputObj.offsetLeft;
while（（inputObj = inputObj.offsetParent）！= null）{
if（inputObj.tagName！="HTML"）returnValue += inputObj.offsetLeft;
}
return returnValue;
}

function cancelSelectionEvent（）
{
if（dragDropTimer>=0）return false;
return true;
}

function getObjectFromPosition（x,y）
{
var height = dragObject.offsetHeight;
var width = dragObject.offsetWidth;
var indexCurrentDragObject=-5;
for（var no=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";
return Array（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）{
return Array（dragableObjectArray[no+1],no+1）;
}else{
if（！useRectangle）return "self";
if（no<dragableObjectArray.length-2）return Array（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"]）{
return Array（dragableObjectArray[no+1],no+1）;
}
}
}
if（x>ref["left"] && y>（ref["top"] + ref["height"]））return "append";
return false;
}

function initDrag（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（）;
return false;
}

function initDragTimer（）
{
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{
var newObject = dragObject.cloneNode（true）;
dragDropMoveLayer.appendChild（newObject）;
}
}
}

function autoScroll（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）;
}

function moveDragableElement（e）
{
if（document.all）e = event;

if（dragDropTimer<10）return;
if（！allowRectangleMove）return false;

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{
var tmpRef = 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）;
}

function stop_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;
}

function cancelEvent（）
{
return false;
}

function repositionDragObjectArray（）
{
for（var no=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;
}

function resetObjectArray（）
{
dragableObjectArray.length=0;
var subDivs = dragableElementsParentBox.getElementsByTagName（"*"）;
var countEl = 0;

for（var no=0;no<subDivs.length;no++）{
var attr = subDivs[no].getAttribute（"dragableBox"）;
if（opera）attr = subDivs[no].dragableBox;
if（attr=="true"）{
var index = dragableObjectArray.length;
dragableObjectArray[index] = new Array（）;
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++;
}
}
}

function initdragableElements（）
{
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）;
}

var subDivs = dragableElementsParentBox.getElementsByTagName（"*"）;
var countEl = 0;
for（var no=0;no<subDivs.length;no++）{
var attr = subDivs[no].getAttribute（"dragableBox"）;
if（opera）attr = subDivs[no].dragableBox;
if（attr=="true"）{
subDivs[no].style.cursor="move";
subDivs[no].onmousedown = initDrag;
var index = dragableObjectArray.length;
dragableObjectArray[index] = new Array（）;
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>

<div id="mainContainer">
<！-- START DRAGABLE CONTENT -->
<div id="dragableElementsParentBox">
<div class="bigArticle" dragableBox="true" id="article1">
<h4>Heading 1</h4>
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast ipsius et altea？ra per purum simulacra ferunturet feriunt oculos turbantia composituras.</p>
</div>
<div class="smallArticle" dragableBox="true" id="article2">
<h4>Heading 2</h4>
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast.</p>
</div>
<div class="smallArticle" dragableBox="true" id="article3">
<h4>Heading 3</h4>
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast.</p>
</div>
<div class="bigArticle" dragableBox="true" id="article4">
<h4>Heading 4</h4>
<p> Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast ipsius et altea？ra per purum simulacra ferunturet feriunt oculos turbantia composituras.</p>
</div>
<div class="smallArticle" dragableBox="true" id="article5">
<h4>Heading 5</h4>
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast.</p>
</div>
<div class="smallArticle" dragableBox="true" id="article6">
<h4>Heading 6</h4>
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast.</p>
</div>
<div class="bigArticle" dragableBox="true" id="article7">
<h4>Heading 7</h4>
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast ipsius et altea？ra per purum simulacra ferunturet feriunt oculos turbantia composituras.</p>
</div>
<div class="bigArticle" dragableBox="true" id="article8">

<h4>Heading 8</h4>
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast ipsius et altea？ra per purum simulacra ferunturet feriunt oculos turbantia composituras.</p>
</div>
<div class="bigArticle" dragableBox="true" id="article9">
<h4>Heading 9</h4>
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast ipsius et altea？ra per purum simulacra ferunturet feriunt oculos turbantia composituras.</p>
</div>
<div class="clear" id="clear"></div>
</div>
<！-- END DRAGABLE CONTENT -->
<input type="button" value="Save" onclick="saveData（）">
</div>
<！-- REQUIRED DIVS -->
<div id="insertionMarker">
<img src="/jscss/demoimg/200906/marker_top.gif">
<img src="/jscss/demoimg/200906/marker_middle.gif" id="insertionMarkerLine">
<img src="/jscss/demoimg/200906/marker_bottom.gif">
</div>
<！-- END REQUIRED DIVS -->
</head>
<body>
</body>
</html>