โมดูล JavaScript แบบสุ่มลากโค้ดตัวอย่าง

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-06-09 15:00:04

复制代码代码如下:

<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"

<head>

<title> JavaScript 模块随意拖动 </title>

html {

ความกว้าง: 100%;

Overflow-X: ซ่อน;

ร่างกาย{

Font-Family: Trebuchet MS, Lucida Sans Unicode, Arial, Sans-Serif;

ความกว้าง: 100%;

มาร์จิ้น: 0px;

Padding: 0px;

TEXT-ALIGN: CENTER;

พื้นหลังสี:#e2EBED;

ขนาดตัวอักษร: 0.7em;

Overflow-X: ซ่อน;

#MainContainer {

ความกว้าง: 600px;

มาร์จิ้น: 0 อัตโนมัติ;

TEXT-ALIGN: ซ้าย;

พื้นหลังสี: #FFF;

H4 {

มาร์จิ้น: 0px;

P {

ระยะขอบด้านบน: 5px;

#DragableElementsParentBox {

Padding: 10px;

.Smallarticle, .bigarticle {

ลอย: ซ้าย;

ชายแดน: 1px Solid #000;

พื้นหลังสี: #DDD;

Padding: 2px;

มาร์จิ้น-ขวา: 10px;

ขอบด้านล่าง: 5px;

.Smallarticle img, .bigarticle img {

ลอย: ซ้าย;

ช่องว่าง: 5px;

.SmallArticle .HrightImage, .Bigarticle. rightImage {

ลอย: ขวา;

.Smallarticle {

ความกว้าง: 274px;

.Bigarticle {

ความกว้าง: 564px;

.ชัดเจน{

ชัดเจน: ทั้งสอง;

#สี่เหลี่ยมผืนผ้า{

ลอย: ซ้าย;

ชายแดน: 1px Dotted #F00;

พื้นหลังสี: #FFF;

#insertionmarker {

ความกว้าง: 6px;

ตำแหน่ง: สัมบูรณ์;

แสดง: ไม่มี;

#insertionmarker img {

ลอย: ซ้าย;

#dragdropmovelayer {

ตำแหน่ง: สัมบูรณ์;

แสดง: ไม่มี;

ชายแดน: 1px Solid #000;

ตัวกรอง: อัลฟ่า (ความทึบ = 50);

ความทึบ: 0.5;

</style>

var rectangleBorderWidth = 2;

var userectangle = false;

var autoscrollspeed = 4;

ฟังก์ชั่นบันทึก ()

var savestring = "";

สำหรับ (var no = 0; no <dragableObjectarray.length; no ++) {

if (savestring.length> 0) savestring = savestring + ';';

ref = dragableObjectarray [ไม่];

savestring = savestring + ref ['obj']. id;

การแจ้งเตือน (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 lewlowrectanglemove = true;

var insertionmarkerline;

var dragdropmovelayer;

var autoscrollactive = false;

var documentHeight = false;

var documentscrollheight = false;

var dragableareawidth = false;

ฟังก์ชั่น gettoppos (inputobj)

var returnValue = inputobj.offsettop;

ในขณะที่ ((inputobj = inputobj.offsetParent)! = null) {

if (inputobj.tagname! = 'html') returnValue += inputobj.offSettop;

returnValue;

ฟังก์ชั่น getleftpos (inputobj)

var returnValue = inputobj.offsetleft;

ในขณะที่ ((inputobj = inputobj.offsetParent)! = null) {

if (inputoBj.tagname! = 'html') returnValue += inputobj.offsetleft;

returnValue;

ฟังก์ชั่น CanCelSelectionEvent ()

if (dragdroptimer> = 0) ส่งคืน false;

กลับมาจริง;

ฟังก์ชั่น getObjectromposition (x, y)

ความสูง var = dragoBject.offSetheight;

var width = dragoBject.offsetWidth;

var indexcurrentDragObject = -5;

สำหรับ (var no = 0; no <dragableObjectarray.length; no ++) {

ref = dragableObjectarray [ไม่];

if (ref ['obj'] == dragoBject) indexcurrentDragObject = no;

if (no <dragableObjectarray.length-1 && dragableObjectArray [no+1] ['obj'] == dragoBject) indexcurrentDragObject = no+1;

if (ref ['obj'] == dragoBject && userectangle) ดำเนินการต่อ;

if (x> ref ['left'] && y> ref ['top'] && x <(ref ['left'] + (ref ['width']/2)) && y <(ref ['top'] + ref ['ความสูง'])) {

if (! userectangle && dragableObjectarray [ไม่] ['obj'] == dragoBject) กลับ 'ตัวเอง';

if (indexcurrentDragObject == (no-1)) ส่งคืน 'self';

return array (dragableObjectarray [ไม่], ไม่);

if (x> (ref ['left'] + (ref ['width']/2)) && y> ref ['top'] && x <(ref ['ซ้าย'] + ref ['width']) && y <(ref ['top'] + ref ['ความสูง'])))

if (no <dragableObjectarray.length-1) {

if (no == indexcurrentDragObject || (no == indexcurrentDragObject-1)) {

กลับ 'ตัวเอง';

ถ้า (dragableObjectarray [ไม่] ['obj']! = dragoBject) {

return array (dragableObjectarray [NO+1], No+1);

}อื่น{

if (! userectangle) ส่งคืน 'self';

if (no <dragableObjectarray.length-2) อาร์เรย์ส่งคืน (dragableObjectarray [no+2], no+2);

}อื่น{

ถ้า (dragableObjectArray [dragableObjectarray.length-1] ['obj']! = dragoBject) ส่งคืน 'ผนวก';

if (no <dragableObjectarray.length-1) {

if (x> (ref ['left'] + ref ['width']) && y> ref ['top'] && y <(ref ['top'] + ref ['ความสูง']) && y <dragableObjectarray [no + 1] ['top']) {

return array (dragableObjectarray [NO+1], No+1);

if (x> ref ['left'] && y> (ref ['top'] + ref ['ความสูง'])) ส่งคืน 'ผนวก';

กลับเท็จ;

ฟังก์ชั่น initDrag (e)

if (document.all) e = เหตุการณ์;

mouse_x = e.clientx;

mouse_y = e.clienty;

if (! DocumentsCrollheight) DocumentsCrollheight = Document.documentElement.scrollheight + 100;

el_x = getleftpos (นี่)/1;

el_y = getToppos (นี่)/1;

dragoBject = this;

ถ้า (userectangle) {

rectanglediv.style.width = this.clientWidth - (rectangleBorderWidth*2) +'px';

rectanglediv.style.height = this.clientheight - (rectangleBorderWidth*2) +'px';

rectangleDiv.className = this.className;

}อื่น{

insertionmarkerline.style.width = '6px';

dragdroptimer = 0;

dragoBjectNextObj = false;

if (this.nextsibling) {

dragoBjectNextobj = this.nextsibling;

if (! dragoBjectNextObj.tagname) dragoBjectNextObj = dragoBjectNextObj.nextsibling;

initDragtimer ();

กลับเท็จ;

ฟังก์ชั่น initdragtimer ()

if (dragdroptimer> = 0 && dragdroptimer <10) {

Dragdroptimer ++;

settimeout ('initdragtimer ()', 5);

กลับ;

if (dragdroptimer == 10) {

ถ้า (userectangle) {

dragoBject.style.Opacity = 0.5;

dragoBject.style.filter = 'alpha (ความทึบ = 50)';

dragoBject.style.cursor = 'default';

}อื่น{

var newObject = dragoBject.clonenode (จริง);

DragdropMovelayer.AppendChild (NewObject);

ฟังก์ชั่น autoscroll (ทิศทาง, ypos)

if (document.documentelement.scrollheight> documentscrollheight && direction> 0) return;

window.scrollby (0, ทิศทาง);

ถ้า (ทิศทาง <0) {

if (document.documentelement.scrolltop> 0) {

mouse_y = mouse_y - ทิศทาง;

ถ้า (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)) {

mouse_y = mouse_y - ทิศทาง;

ถ้า (userectangle) {

dragoBject.style.top = (el_y - mouse_y + ypos) + 'px';

}อื่น{

dragdropmovelayer.style.top = (el_y - mouse_y + ypos) + 'px';

}อื่น{

autoScrollactive = false;

ถ้า (autoscrollactive) settimeout ('autoscroll (' + direction + ',' + ypos + ')', 5);

ฟังก์ชั่นย้าย ragableElement (e)

if (document.all) e = เหตุการณ์;

ถ้า (dragdroptimer <10) กลับ;

if (! lewretanglemove) ส่งคืนเท็จ;

if (e.clienty <50 || e.clienty> (documentHeight-50)) {

ถ้า (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);

}อื่น{

autoScrollactive = false;

ถ้า (userectangle) {

if (dragoBject.style.position! = 'Absolute') {

dragoBject.style.position = 'Absolute';

settimeout ('repositionDragObjectArray ()', 50);

ถ้า (userectangle) {

rectanglediv.style.display = 'block';

}อื่น{

InsertionMarkerDiv.style.display = 'block';

dragdropmovelayer.style.display = 'block';

ถ้า (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';

}อื่น{

dragdropMovelayer.style.left = (el_x - mouse_x + e.clientx + math.max (document.body.scrollleft, documentEnumentElement.scrollleft)) + 'px';

dragdropmovelayer.style.top = (el_y - mouse_y + e.clienty) + 'px';

dest = getObjectfromposition (e.clientx+math.max (document.body.scrollleft, documentEdocumentElement.scrollleft), e.clienty+math.max (document.body.scrolltop, documentElement.scrolltop);

if (dest! == false && dest! = 'ผนวก' && dest! = 'self') {

destinationObj = dest [0];

if (currentDest! == destinationObj) {

currentDest = destinationObj;

ถ้า (userectangle) {

destinationobj ['obj']. parentnode.insertbefore (rectanglediv, destinationobj ['obj']);

repositionDragObjectArray ();

}อื่น{

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] ['ความสูง'] + 'px';

}อื่น{

insertionmarkerdiv.style.left = (getLeftPos (destinationObj ['obj']) - 8) + 'px';

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

insertionmarkerline.style.height = destinationObj ['ความสูง'] + 'px';

if (dest == 'self' ||! dest) {

InsertionMarkerDiv.style.display = 'ไม่มี';

destinationObj = dest;

if (dest == 'ผนวก') {

ถ้า (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 ['ความสูง'] + 'px';

destinationObj = dest;

repositionDragObjectArray ();

if (userectangle &&! dest) {

destinationObj = currentDest;

lewalrectanglemove = false;

settimeout ('lewterrectanglemove = true', 50);

ฟังก์ชั่น stop_dragdropelement ()

dragdroptimer = -1;

if (destinationObj && destinationObj! = 'ผนวก' && destinationObj! = 'self') {

destinationObj ['obj']. parentnode.insertbefore (dragoBject, destinationObj ['obj']);

if (destinationObj == 'ผนวก') {

DragableElementsParentBox.AppendChild (DragoBject);

DragableElementsParentBox.AppendChild (Document.getElementById ('Clear'));

if (dragoBject && userectangle) {

dragoBject.style.Opacity = 1;

dragoBject.style.filter = 'alpha (ความทึบ = 100)';

dragoBject.style.cursor = 'ย้าย';

dragoBject.style.position = 'คงที่';

rectanglediv.style.display = 'ไม่มี';

InsertionMarkerDiv.style.display = 'ไม่มี';

dragoBject = false;

currentDest = false;

ResetObjectArray ();

destinationObj = false;

if (dragdropmovelayer) {

dragdropMovelayer.style.display = 'ไม่มี';

dragdropmovelayer.innerhtml = '';

autoScrollactive = false;

DocumentsCrollheight = document.documentelement.scrollheight + 100;

ฟังก์ชั่น cancelevent ()

กลับเท็จ;

ฟังก์ชั่น repositionDragObjectArray ()

สำหรับ (var no = 0; no <dragableObjectarray.length; no ++) {

ref = dragableObjectarray [ไม่];

ref ['left'] = getleftpos (อ้างอิง ['obj']);

ref ['top'] = getToppos (อ้างอิง ['obj']);

DocumentsCrollheight = document.documentelement.scrollheight + 100;

documentHeight = document.documentelement.clientheight;

ฟังก์ชั่น resetobjectarray ()

dragableObjectarray.length = 0;

var subdivs = dragableElementsParentBox.getElementsByTagname ('*');

var countel = 0;

สำหรับ (var no = 0; no <subdivs.length; no ++) {

var attr = subdivs [no] .getAttribute ('dragablebox');

if (opera) attr = subdivs [no] .dragablebox;

if (attr == 'true') {

ดัชนี var = dragableObjectarray.length;

DragableObjectArray [ดัชนี] = new Array ();

ref = dragableObjectarray [ดัชนี];

ref ['obj'] = subdivs [ไม่];

ref ['width'] = subdivs [no] .offsetWidth;

ref ['ความสูง'] = subdivs [ไม่] .offsetheight;

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;

if (! userectangle) {

dragdropMovelayer = document.createElement ('div');

dragdropMovelayer.id = 'dragdropmovelayer';

document.body.appendchild (dragdropmovelayer);

var subdivs = dragableElementsParentBox.getElementsByTagname ('*');

var countel = 0;

สำหรับ (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 = 'ย้าย';

subdivs [no] .onmousedown = initDrag;

ดัชนี var = dragableObjectarray.length;

DragableObjectArray [ดัชนี] = new Array ();

ref = dragableObjectarray [ดัชนี];

ref ['obj'] = subdivs [ไม่];

ref ['width'] = subdivs [no] .offsetWidth;

ref ['ความสูง'] = subdivs [ไม่] .offsetheight;

ref ['left'] = getleftpos (subdivs [no]);

ref ['top'] = getToppos (subdivs [no]);

ref ['index'] = Countel;

Countel ++;

rectangleDiv = document.createElement ('div');

rectanglediv.id = 'สี่เหลี่ยมผืนผ้า';

rectanglediv.style.display = 'ไม่มี';

DragableElementsParentBox.AppendChild (rectanglediv);

document.body.onmousemove = ย้าย ragableElement;

document.body.onmouseup = stop_dragdropelement;

document.body.onselectStart = CancelSelectionEvent;

document.body.ondragstart = cancelevent;

window.onresize = repositionDragObjectArray;

documentHeight = document.documentelement.clientheight;

window.onload = initDragableElements;

</script>

<!-เริ่มเนื้อหาที่ลากได้->

<H4> หัวเรื่อง 1 </h4>

<p> Splendida Porro Oculi ผู้ลี้ภัย Vitantque Tueri Sol etiam caecat, Contra si tendere pergas, propterea quia vis magnast ipsius et altea? ra ต่อ purum simulacra ferunturet feriunt oculos turbantia composituras </p>

</div>

<H4> หัวเรื่อง 2 </h4>

<p> Splendida Porro Oculi ผู้ลี้ภัย Vitantque Tueri Sol etiam Caecat, Contra si tendere pergas, propterea quia vis magnast. </p>

</div>

<H4> หัวเรื่อง 3 </h4>

<p> Splendida Porro Oculi ผู้ลี้ภัย Vitantque Tueri Sol etiam Caecat, Contra si tendere pergas, propterea quia vis magnast. </p>

</div>

<H4> หัวเรื่อง 4 </h4>

</div>

<H4> หัวเรื่อง 5 </h4>

<p> Splendida Porro Oculi ผู้ลี้ภัย Vitantque Tueri Sol etiam Caecat, Contra si tendere pergas, propterea quia vis magnast. </p>

</div>

<H4> หัวเรื่อง 6 </h4>

<p> Splendida Porro Oculi ผู้ลี้ภัย Vitantque Tueri Sol etiam Caecat, Contra si tendere pergas, propterea quia vis magnast. </p>

</div>

</div>

<H4> หัวเรื่อง 8 </h4>

</div>

<H4> หัวเรื่อง 9 </h4>

</div>

</div>

<!-จบเนื้อหาที่ลากได้->

<อินพุต type = "button" value = "บันทึก" onclick = "savedata ()">>

</div>

<!-ต้องมี divs->

</div>

<!-สิ้นสุด divs ที่ต้องการ->

</head>

<body>

</body>

</html>