JavaScript模块随意拖动示例代码

前端技术 2023/09/05 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>

本文地址：https://www.stayed.cn/item/13743

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案