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：非表示;

}

体{

フォントファミリー：Trebuchet MS、Lucida Sans Unicode、Arial、Sans-Serif;

幅：100％;

マージン：0px;

パディング：0px;

テキストアライグ：センター;

バックグラウンドカラー：＃e2ebed;

フォントサイズ：0.7em;

Overflow-X：非表示;

}

#MainContainer {

幅：600px;

マージン：0 Auto;

テキストアライグ：左;

バックグラウンドカラー：#fff;

}

H4 {

マージン：0px;

}

p {

マージントップ：5px;

}

#dragableElementsParentbox {

パディング：10px;

}

.smallarticle、.bigarticle {

フロート：左;

国境：1pxソリッド＃000;

バックグラウンドカラー：#ddd;

パディング：2px;

マージン右：10px;

マージンボトム：5px;

}

.smallarticle img、.bigarticle img {

フロート：左;

パディング：5px;

}

.smallarticle .rightimage、.bigarticle .rightimage {

フロート：そうです;

}

.smallarticle {

幅：274px;

}

.bigarticle {

幅：564px;

}

。クリア{

クリア：両方;

}

＃矩形{

フロート：左;

国境：1px点線＃f00;

バックグラウンドカラー：#fff;

}

#insertionmarker {

幅：6px;

位置：絶対;

表示：なし;

}

#insertionmarker img {

フロート：左;

}

#dragdropmovelayer {

位置：絶対;

表示：なし;

国境：1pxソリッド＃000;

フィルター：アルファ（不透明度= 50）;

不透明度：0.5;

}

</style>

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']。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 AllowRectAngLemove = 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;

}

関数getLeftpos（inputobj）

{

var returnValue = inputobj.offsetLeft;

while（（inputobj = inputobj.offsetParent）！= null）{

if（inputobj.tagname！= 'html'）returnValue += inputobj.offsetLeft;

}

ReturnValue;

}

関数cancelselectionevent（）

{

if（dragdroptimer> = 0）falseを返します。

trueを返します。

}

関数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）継続;

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））を「self」を返します。

return array（radableObjectArray [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））{

「自己」を返します。

}

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

Return Array（dragableObjectArray [no+1]、no+1）;

}それ以外{

if（！userectangle） 'self'を返します。

if（no <dragableObjectArray.length-2）return array（radableObjectArray [no+2]、no+2）;

}

}それ以外{

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

falseを返します。

}

関数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;

}それ以外{

InsertionMarkerline.style.width = '6px';

}

dragdroptimer = 0;

dragObjectNextOBJ = false;

if（this.nextsibling）{

dragObjectNextobj = this.nextsibling;

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

}

initdragtimer（）;

falseを返します。

}

関数initdragtimer（）

{

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

dragdroptimer ++;

setimeout（ 'initdragtimer（）'、5）;

戻る;

}

if（dragdroptimer == 10）{

if（userectangle）{

dragobject.style.opacity = 0.5;

dragobject.style.filter = 'alpha（ofacity = 50）';

dragobject.style.cursor = 'default';

}それ以外{

var newObject = dragobject.cloneNode（true）;

dragdropmovelayer.appendchild（newObject）;

}

function autoscroll（方向、ypos）

{

if（document.documentelement.scrollheight> documentscrollheight && direction> 0）return;

window.scrollby（0、方向）;

if（方向<0）{

if（document.documentelement.scrolltop> 0）{

mouse_y = mouse_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））{

mouse_y = mouse_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）setimeout（ 'autoscroll（' + direction + '、' + ypos + '）'、5）;

}

関数moveRagableElement（e）

{

if（document.all）e = event;

if（dragdroptimer <10）return;

if（！aldawrectanglemove）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）;

}

}それ以外{

autoScrollactive = false;

}

if（userectangle）{

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

dragobject.style.position = 'absolute';

setimeout（ 'repositiondragObjectArray（）'、50）;

}

if（userectangle）{

rectanglediv.style.display = 'block';

}それ以外{

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

}それ以外{

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（）;

}それ以外{

if（dest [1]> 0 &&（dragableObjectArray [dest [1] -1] ['obj']。offsetLeft + dragableObjectArray [dest [1] -1] ['width'] + dragobject.offsetwidth）{dragableareawidth）{

InsertionMarkerdiv.style.left =（getLeftpos（dragableObjectArray [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';

}それ以外{

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'））;

}それ以外{

var tmpref = dragableObjectArray [radableObjectArray.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;

setimeout（ 'AllowRectangLemove = true'、50）;

}

関数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（ofacity = 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（）

{

falseを返します。

}

関数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 ++;

}

関数initdragablelements（）

{

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 = moveRagableElement;

document.body.onmouseup = stop_dragdropelement;

document.body.onselectstart = cancelselectionEvent;

document.body.ondragstart = cancelevent;

window.onresize = repositiondragObjectArray;

documentheight = document.documentelement.clientheight;

}

window.onload = initdragableElements;

</script>

<！ - ドラッグ可能なコンテンツを開始 - >

<p> Splendida Porro oculi fugitant vitantque tueri。 sol etiam caecat、contra si tendere pergas、propterea quia vis vis magnast ipsius et altea？ra per purum simulacra ferunturet feriunt oculos turbantia composituras。</p>

</div>

<p> Splendida Porro oculi fugitant vitantque tueri。 Sol Etiam Caecat、Contra Si Tendere Pergas、Propterea Quia Vis Magnast。</p>

</div>

<p> Splendida Porro oculi fugitant vitantque tueri。 Sol Etiam Caecat、Contra Si Tendere Pergas、Propterea Quia Vis Magnast。</p>

</div>

</div>

<p> Splendida Porro oculi fugitant vitantque tueri。 Sol Etiam Caecat、Contra Si Tendere Pergas、Propterea Quia Vis Magnast。</p>

</div>

<p> Splendida Porro oculi fugitant vitantque tueri。 Sol Etiam Caecat、Contra Si Tendere Pergas、Propterea Quia Vis Magnast。</p>

</div>

</div>

</div>

</div>

</div>

<！ - ドラッグ可能なコンテンツを終了 - >

<入力型= "button" value = "save" onclick = "savedata（）">

</div>

<！ - 必須div->

</div>

<！ - 必要なdivsを終了 - >

</head>

<body>

</body>

</html>