JavaScript模塊隨意拖動示例代碼

作者：Eve Cole 更新時間：2025-06-09 15:00:04

複製代碼代碼如下：

<！ Doctype HTML公共“ - // W3C // DTD XHTML 1.0 Transitional // en”“” http://www.org/tr/tr/xhtml1/dtd/xhtml1-xhtml1-transitional.transitional.dtdd'>

<頭>

<Title> JavaScript模塊隨意拖動</title>

html {

寬度：100％；

Overflow-X：隱藏；

}

身體{

字體家庭：Trebuchet MS，Lucida Sans Unicode，Arial，Sans-Serif；

寬度：100％；

保證金：0px;

填充：0px;

文字平衡：中心；

背景色：＃e2ebed;

字體大小：0.7EM;

Overflow-X：隱藏；

}

#MainContainer {

寬度：600px;

保證金：0自動；

文本平衡：左；

背景色：#FFF;

}

H4 {

保證金：0px;

}

p {

保證金頂：5px;

}

#DragableElementsParentBox {

填充：10px;

}

。

浮子：左；

邊界：1PX實心＃000;

背景色：#DDD;

填充：2px;

邊緣右：10px;

邊緣底：5px;

}

。

浮子：左；

填充：5px;

}

。

浮點：對；

}

.smallarticle {

寬度：274px;

}

.bigarticle {

寬度：564px;

}

。清除{

清晰：兩者;

}

＃長方形{

浮子：左；

邊界：1px點＃f00;

背景色：#FFF;

}

#insertionmarker {

寬度：6px;

位置：絕對；

顯示：無；

}

#insertionmarker img {

浮子：左；

}

#dragdropmovelayer {

位置：絕對；

顯示：無；

邊界：1PX實心＃000;

過濾器：alpha（不透明度= 50）;

不透明度：0.5;

}

</style>

<腳本類型=“ text/javascript”>

var rectangleBorderWidth = 2;

var userectangle = false;

var autoscrollspeed = 4;

函數savedata（）

{

var savestring =“”;

for（var no = 0; no <dragableObjectArray.length; no ++）{

if（savestring.length> 0）savestring = savestring +';';

ref = dragableObjectArray [no];

savestring = savestring + ref ['obj']。

}

警報（Savestring）;

}

var dragableElementsParentBox;

var opera = navigator.appversion.indexof（'opera'）> = 0？ true：false;

var rectanglediv = false;

var insertionmarkerdiv = false;

var鼠標_x;

var鼠標_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允許rectanglemove = true;

var insertionmarkerline;

var dragdropmovelayer;

var autoScrollactive = false;

var documentHeight = false;

var documentsCrollHeight = false;

var dragableareawidth = false;

函數getToppos（inputObj）

{

var returnValue = inputobj.offsetTop;

while（（（inputObj = inputobj.offsetparent）！= null）{

if（inputObj.tagname！='html'）returnValue += inputObj.offSetTop;

}

返回returnValue;

}

函數getLeftPO（inputObj）

{

var returnValue = inputObj.offsetLeft;

while（（（inputObj = inputobj.offsetparent）！= null）{

if（inputObj.tagname！='html'）returnValue += inputObj.offSetleft;

}

返回returnValue;

}

函數comcelselectionevent（）

{

if（dragdroptimer> = 0）返回false;

返回true;

}

功能getObject fromposition（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;

如果（ref ['obj'] == dragObject && userectangle）繼續；

如果（x> ref ['left'] && y> ref ['top'] && x <（ref ['left'] +（ref ['width']/2））&& y <（ref ['top'] + ref ['height']）{）{

如果（！userectangle && dragableObjectArray [no] ['obj'] == dragObject）返回'self';

if（indexCurrentDragobject ==（no-1））返回'self';

返回數組（DragableObjectArray [no]，no）;

}

if（x>（ref ['left'] +（ref ['width']/2））&& y> ref ['top'] && x <（ref ['left''] + ref ['width']）&& y per

if（no <dragableObjectArray.length-1）{

if（no == indexCurrentDragobject ||（no == indexCurrentDragoBject-1）{

返回“自我”；

}

if（dragableObjectArray [no] ['obj']！= dragObject）{

返回數組（DragableObjectArray [no+1]，no+1）;

}別的{

如果（！userectangle）返回“ self”；

if（no <dragableObjectArray.length-2）返回數組（dragableObjectArray [no+2]，no+2）;

}

}別的{

if（dragableObjectArray [DragableObjectArray.length-1] ['obj']！= dragObject）返回'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']）{

返回數組（DragableObjectArray [no+1]，no+1）;

}

如果（x> ref ['left'] && y>（ref ['top'] + ref ['height']））返回'append';

返回false;

}

功能initdrag（e）

{

if（document.all）e = event;

鼠標_x = e.clientx;

鼠標_y = e.clienty;

if（！documentsCrollHeight）文檔crollheight = 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';

retctanglediv.Style.height = this.ClientHeight-（RectangleBorderWidth*2） +'px';

retectanglediv.ClassName = this.className;

}別的{

insertionmarkerline.style.width ='6px';

}

DragDropTimer = 0;

dragObjectNextObj = false;

如果（this.nextsibling）{

dragObjectNextObj = this.nextsibling;

if（！dragObjectNextObj.tagname）dragObjectNextObj = dragObjectNextobj.nextsibling;

}

initdragtimer（）;

返回false;

}

函數initdragtimer（）

{

if（dragdroptimer> = 0 && dragdroptimer <10）{

DragDropTimer ++;

settimeout（'initdragtimer（）'，5）;

返回;

}

if（dragdroptimer == 10）{

if（userectangle）{

DragObject.Style.opacity = 0.5;

dragObject.Style.filter ='alpha（opacity = 50）';

dragObject.Style.cursor ='default';

}別的{

var newObject = dragObject.cloneNode（true）;

DragDropMovelayer.AppendChild（newObject）;

}

功能自動滾動（方向，YPO）

{

if（document.documentelement.scrollheight> documentCrollHeight &&方向> 0）返回;

window.scrollby（0，方向）;

如果（方向<0）{

if（document.documentelement.scrolltop> 0）{

鼠標_y =鼠標_y-方向;

if（userectangle）{

dragObject.Style.top =（el_y -mouse_y + ypos） +'px';

}別的{

dragDropMovelayer.Style.top =（el_y -mouse_y + ypos） +'px';

}

}別的{

autoScrollactive = false;

}

}別的{

if（ypos>（documentheight-50））{

鼠標_y =鼠標_y-方向;

if（userectangle）{

dragObject.Style.top =（el_y -mouse_y + ypos） +'px';

}別的{

dragDropMovelayer.Style.top =（el_y -mouse_y + ypos） +'px';

}

}別的{

autoScrollactive = false;

}

if（autoScrollactive）settimeout（'autoscroll（' + Direction +'，' + ypos +'）'，5）;

}

函數MOVETRAGABLEELEMENT（E）

{

if（document.all）e = event;

if（dragdroptimer <10）返回；

if（！allowRectanglemove）返回false;

if（e.clienty <50 || e.clienty>（DocumentHeight-50））{

if（e.clienty <50 &&！autoScrollactive）{

autoScrollactive = true;

自動滾動（（autoscrollspeed*-1），e.clienty）;

}

if（e.clienty>（documentheight-50）&& document.documentElement.scrollheight <= document crollheight &&！autoScrollactive）{

autoScrollactive = true;

自動滾動（AutoScrollSpeed，e.clienty）;

}

}別的{

autoScrollactive = false;

}

if（userectangle）{

if（dragObject.style.position！='absolute'）{

dragObject.Style.position ='absolute';

settimeout（'repositiondragobjectArray（）'，50）;

}

if（userectangle）{

retectanglediv.style.display ='block';

}別的{

insertionmarkerdiv.style.display ='block';

DragDropMovelayer.Style.display ='Block';

}

if（userectangle）{

dragObject.Style.left =（el_x -鼠標_x + e.clientx + math.max（document.body.body.scrollleft，document.documentElement.scrollleft）） +'px';

dragObject.Style.top =（el_y -mouse_y + e.clienty） +'px';

}別的{

dragDropMovelayer.Style.Left =（el_x -mouse_x + e.Clientx + Math.max（document.body.body.scrollleft，document.documentEllement.scrolllement.scrollleft）） +'px';

dragDropMovelayer.Style.top =（el_y -mouse_y + e.clienty） +'px';

}

dest = getObjectFromposition（e.ClientX+Math.max（document.body.body.scrollleft，document.documentElement.scrollleft），e.Clienty+Math.max（document.body.body.scrolltop，document.documentEltop.documentelement.scrolltop））;

如果（dest！== false && dest！='append'&& dest！='self'）{

destinationObj = dest [0];

if（currentdest！== destination obj）{

CurrentDest = destinationObj;

if（userectangle）{

destination obj ['obj']。 parentnode.insertbefore（rectAngeDiv，destination obj ['obj']）;

repositiondragobjectArray（）;

}別的{

if（dest [1]> 0 &&（dragableObjectArray [dest [1] -1] ['obj']。offsetLeft + dragableObjectArray [dest [1] -1] -1 -1] ['width'] + dragObject.offsetWidth）

insertionmarkerdiv.style.left =（getLeftPos（dragableObjectArray [dest [1] -1] -1] ['obj']） + dragableObjectArray [dest [1] -1] -1] ['width'] + 2） + 2） +'px';

insertionmarkerdiv.style.top =（getToppos（dragableObjectArray [dest [1] -1] -1] ['obj']） - 2） +'px';

insertionmarkerline.style.height = dragableObjectArray [dest [1] -1] -1 ['height'] +'px';

}別的{

insertionmarkerdiv.style.left =（getLeftpos（destinationObj ['obj']） - 8） +'px';

insertionmarkerdiv.style.top =（getToppos（destinationObj ['obj']） - 2） +'px';

insertionmarkerline.style.height = destinationObj ['height'] +'px';

}

如果（dest =='self'||！dest）{

insertionmarkerdiv.style.display ='none';

destinationObj = dest;

}

如果（dest =='append'）{

if（userectangle）{

DragableElementsParentBox.AppendChild（RectangleDiv）;

DragableElementsParentBox.AppendChild（document.getElementById（'clear'））;

}別的{

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;

}

允許Rectanglemove = false;

settimeout（'allowRectanglemove = true'，50）;

}

函數stop_dragdropelement（）

{

DragDropTimer = -1;

if（destination obj && destination obj！='append'&& destination obj！='self'）{

destination obj ['obj']。 parentnode.insertbefore（dragObject，destination obj ['obj']）;

}

if（destination obj =='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';

}

retectanglediv.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;

}

函數concelevent（）

{

返回false;

}

函數retositiondragobjectArray（）

{

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;

}

函數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;

如果（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] .offseight;

ref ['left'] = getleftpos（subdivs [no]）;

ref ['top'] = getToppos（subdivs [no]）;

ref ['index'] = countel;

Countel ++;

}

函數initdragableElements（）

{

DragableElementsParentBox = document.getElementById（'dragableElementsParentBox'）;

insertionmarkerDiv = document.getElementById（'insertionmarker'）;

insertionmarkerline = document.getElementById（'insertionmarkerline'）;

dragableAreAwidth = DragableElementsParentBox.OffSetWidth;

如果（！userectangle）{

dragDropMovelayer = document.createelement（'div'）;

DragDropMovelayer.id ='DragDropMovelayer';

document.body.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;

如果（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] .offseight;

ref ['left'] = getleftpos（subdivs [no]）;

ref ['top'] = getToppos（subdivs [no]）;

ref ['index'] = countel;

Countel ++;

}

矩形= document.createelement（'div'）;

矩陣id ='矩形';

retectanglediv.style.display ='none';

DragableElementsParentBox.AppendChild（RectangleDiv）;

document.body.onmousemove = moveRagableElement;

document.body.onmouseup = stop_dragdropelement;

document.body.onelectStart = CancelSelectionEvent;

document.body.ondragstart = cancelevent;

window.sonresize = repositiondragobjectArray;

DocumentHeight = Document.DocumentElement.ClientHeight;

}

window.onload = initdragableElements;

</script>

<！ - 開始可拖動內容 - >

<p> Splendida porro oculi fugitant Vitantque tueri。 SOL ETIAM CAECAT，CONTRA SI TERDERE PERGA，Propterea quia Vis Magnast Ipsius et aletea？ ra purum simulacra ferunturet feriunturet feriunt feriunt oculos oculos oculos turbantia copsituras。 </p>

</div>

<p> Splendida porro oculi fugitant Vitantque tueri。 SOL ETIAM CAECAT，CONTRA SI TERDERE PERGA，propterea Quia Vis Magnast。 </p>

</div>

<p> Splendida porro oculi fugitant Vitantque tueri。 SOL ETIAM CAECAT，CONTRA SI TERDERE PERGA，propterea Quia Vis Magnast。 </p>

</div>

</div>

<p> Splendida porro oculi fugitant Vitantque tueri。 SOL ETIAM CAECAT，CONTRA SI TERDERE PERGA，propterea Quia Vis Magnast。 </p>

</div>

<p> Splendida porro oculi fugitant Vitantque tueri。 SOL ETIAM CAECAT，CONTRA SI TERDERE PERGA，propterea Quia Vis Magnast。 </p>

</div>

</div>

</div>

</div>

</div>

<！ - 結束可拖動內容 - >

</div>

<！ - 需要Divs->

</div>

<！ - 結束需要divs->

</head>

<身體>

</body>

</html>