复制代码 代码如下:
<!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="/UploadFiles/2021-04-02/marker_top.gif"><img src="/jscss/demoimg/200906/marker_middle.gif"><img src="/UploadFiles/2021-04-02/marker_bottom.gif"></div>
<!-- END REQUIRED DIVS -->
</head>
<body>
</body>
</html>
<!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="/UploadFiles/2021-04-02/marker_top.gif"><img src="/jscss/demoimg/200906/marker_middle.gif"><img src="/UploadFiles/2021-04-02/marker_bottom.gif"></div>
<!-- END REQUIRED DIVS -->
</head>
<body>
</body>
</html>
标签：
模块,拖动
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“JavaScript模块随意拖动示例代码”评论...
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！
昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？