JavaScript模块随意拖动示例代码

时间:2020-05-13 人气:1

<!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">

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

<input type="button" value="Save" onclick="saveData()">
</div>

<div id="insertionMarker">
<img src="/jscsshttps://img.qb5200.com/download-x/demoimg/200906/marker_top.gif">
<img src="/jscsshttps://img.qb5200.com/download-x/demoimg/200906/marker_middle.gif" id="insertionMarkerLine">
<img src="/jscsshttps://img.qb5200.com/download-x/demoimg/200906/marker_bottom.gif">
</div>

</head>
<body>
</body>
</html>

加载全部内容