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>

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

}

}

}

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” width=100% src=”/jscss/demoimg/200906/marker_top.gif”>

<img” width=100% src=”/jscss/demoimg/200906/marker_middle.gif” id=”insertionMarkerLine”>

<img” width=100% src=”/jscss/demoimg/200906/marker_bottom.gif”>

</div>

<!– END REQUIRED DIVS –>

</head>

<body>

</body>

</html>

SyntaxHighlighter.highlight();