复制代码代码如下::
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = gb2312" />
<title> JavaScript 模块随意拖动 </title>
<style type = "text/css">
html {
Breite: 100%;
Überlauf-X: versteckt;
}
Körper{
Schriftfamilie: Trebuchet MS, Lucida Sans Unicode, Arial, Sans-Serif;
Breite: 100%;
Rand: 0px;
Polsterung: 0px;
Text-Align: Mitte;
Hintergrundfarbe:#E2EBED;
Schriftgröße: 0,7EM;
Überlauf-X: versteckt;
}
#MainContainer {
Breite: 600px;
Rand: 0 Auto;
Text-Align: links;
Hintergrundfarbe: #fff;
}
H4 {
Rand: 0px;
}
P{
Rand: 5px;
}
#DagableElementsParentBox {
Polsterung: 10px;
}
.Smallarticle, .bigArticle {
float: links;
Grenze: 1PX Solid #000;
Hintergrundfarbe: #ddd;
Polsterung: 2px;
Rand-Rechts: 10px;
Randboden: 5px;
}
.Smallarticle img, .bigarticle img {
float: links;
Polsterung: 5px;
}
.Smallarticle .RightImage, .bigArticle .RightImage {
float: rechts;
}
.Smallarticle {
Breite: 274px;
}
.bigarticle {
Breite: 564px;
}
.klar{
klar: beides;
}
#Rechteck{
float: links;
Grenze: 1PX gepunktet #f00;
Hintergrundfarbe: #fff;
}
#InsertionMarker {
Breite: 6px;
Position: absolut;
Anzeige: Keine;
}
#InsertionMarker img {
float: links;
}
#DRagdropMovelayer {
Position: absolut;
Anzeige: Keine;
Grenze: 1PX Solid #000;
Filter: Alpha (Opazität = 50);
Deckkraft: 0,5;
}
</style>
<script type = "text/javaScript">
var rechteckBorderwidth = 2;
var userectangle = false;
var autoscrollSpeed = 4;
funktionssparendata ()
{
var Savestring = "";
für (var no = 0; nein <dragableObjectArray.length; no ++) {
if (Savestring.length> 0) SaveString = Savestring + ';';
Ref = DragableObjectArray [nein];
Savestring = Savestring + Ref ['obj']. ID;
}
Alarm (Savestring);
}
var dragableElementsParentBox;
var opera = navigator.appversion.indexof ('Opera')> = 0? Richtig: false;
var rechteckig = falsch;
var InsertionMarkerDIV = false;
var maus_x;
var maus_y;
var el_x;
var el_y;
var dragdroptimer = -1;
var dragObject = false;
var dragObjectNextObj = false;
var dragableObjectArray = new Array ();
var destinationObj = false;
var aktuelldest = false;
var erlaubteRectanglemove = true;
var InsertionMarkerline;
var DragdropMovelayer;
var autoscrollactive = false;
var documentHeight = false;
var documentsCrollHeight = false;
var dragableareAwidth = false;
Funktion getoppos (inputObj)
{
var returnValue = inputObj.offsettop;
while ((inputObj = inputObj.offsetParent)! = null) {
if (inputObj.tagname! = 'html') returnValue += inputObj.offsettop;
}
return returnValue;
}
Funktion getleftpos (InputObj)
{
var returnValue = inputObj.offsetleft;
while ((inputObj = inputObj.offsetParent)! = null) {
if (inputObj.tagname! = 'html') returnValue += inputObj.offsetleft;
}
return returnValue;
}
Funktion cancelectionEvent ()
{
if (dragdroptimer> = 0) return false;
zurückkehren;
}
Funktion getObjectFromposition (x, y)
{
var hohe = DragObject.offseteight;
var width = DragObject.Offsetwidth;
var indexcurrentDagObject = -5;
für (var no = 0; nein <dragableObjectArray.length; no ++) {
Ref = DragableObjectArray [nein];
if (ref ['obj'] == DragObject) IndexcurrentDagObject = no;
if (nein <dragableObjectArray.length-1 && dragableObjectArray [no+1] ['obj'] == DragObject) IndexcurrentDagObject = no+1;
if (ref ['obj'] == DragObject && userEctangle) weiter;
if (x> ref ['links'] && y> ref ['top'] && x <(ref ['links'] + (ref ['width']/2))) && y <(ref ['top'] + ref ['Höhe'])) {
if (! UserEctangle && dragableObjectArray [nein] ['obj'] == DragObject) return 'self';
if (indexcurrentDagObject == (NO-1)) return 'self';
Rückgabearray (DragableObjectArray [nein], no);
}
if (x> (ref ['links'] + (ref ['width']/2)) && y> ref ['top'] && x <(ref ['links'] + ref ['width']) && y <(ref ['top'] + ref ['Höhe']) {
if (nein <dragableObjectArray.length-1) {
if (no == indexcurrentDagObject || (no == IndexcurrentDagObject-1)) {
zurück 'self';
}
if (dragableObjectArray [nein] ['obj']! = DragObject) {
Rückgabearray (dragableObjectArray [no+1], no+1);
}anders{
if (! UserEctangle) zurück 'self';
if (nein <DragableObjectArray.Length-2) Return Array (DragableObjectArray [no+2], no+2);
}
}anders{
if (dragableObjectArray [dragableObjectArray.length-1] ['obj']! = DragObject) return 'append';
}
}
if (nein <dragableObjectArray.length-1) {
if (x> (ref ['links'] + ref ['width']) && y> ref ['top'] && y <(ref ['top'] + ref ['height']) && y <dragableObjectArray [no + 1] ['top']) {
Rückgabearray (dragableObjectArray [no+1], no+1);
}
}
}
if (x> ref ['links'] && y> (ref ['top'] + ref ['Höhe'])) return 'append';
false zurückgeben;
}
Funktion InitDRag (e)
{
if (document.all) e = Ereignis;
maus_x = e.clientX;
maus_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 - (rechteckleborderwidth*2) +'px';
rectanglediv.style.height = this.clientHeight - (rechteckleborderwidth*2) +'px';
rectanglediv.className = this.className;
}anders{
InsertionMarkerline.Style.width = '6px';
}
Dragdroptimer = 0;
DragObjectNextObj = false;
if (this.NextSsibling) {
DragObjectNextObj = this.NextSsibling;
if (! DragObjectNextObj.tagname) DragObjectNextObj = DragObjectNextObj.NextSsibling;
}
initdragimer ();
false zurückgeben;
}
Funktion initdragimer ()
{
if (dragdroptimer> = 0 && dragdroptimer <10) {
Dragdroptimer ++;
setTimeout ('initdragimer ()', 5);
zurückkehren;
}
if (dragdroptimer == 10) {
if (userectangle) {
DragObject.Style.Opacity = 0,5;
DragObject.Style.Filter = 'Alpha (Opazität = 50)';
DragObject.Style.cursor = 'Standard';
}anders{
var newObject = DragObject.clonenode (true);
DragdropMovelayer.AppendChild (NewObject);
}
}
}
Funktion autoscroll (Richtung, ypos)
{
if (document.documentElement.scrollHeight> documentsCrollHeigh && Direction> 0) return;
Fenster.Scrollby (0, Richtung);
if (Richtung <0) {
if (document.documentElement.scrolltop> 0) {
MOUSE_Y = Mouse_y - Richtung;
if (userectangle) {
DragObject.Style.top = (el_y - maus_y + ypos) + 'px';
}anders{
DragdropMovelayer.Style.top = (el_y - maus_y + ypos) + 'px';
}
}anders{
autoscrollactive = false;
}
}anders{
if (ypos> (documentHeight-50)) {
MOUSE_Y = Mouse_y - Richtung;
if (userectangle) {
DragObject.Style.top = (el_y - maus_y + ypos) + 'px';
}anders{
DragdropMovelayer.Style.top = (el_y - maus_y + ypos) + 'px';
}
}anders{
autoscrollactive = false;
}
}
if (autoscrollactive) setTimeout ('autoscroll (' + Richtung + ',' + ypos + ')', 5);
}
Funktion bewegungsablagerung (e)
{
if (document.all) e = Ereignis;
if (Dragdroptimer <10) zurück;
if (! duldrectanglemove) 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
autoscrollactive = true;
autoscroll (autoscrollspeed, e.clienty);
}
}anders{
autoscrollactive = false;
}
if (userectangle) {
if (DragObject.Style.position! = 'Absolute') {
DragObject.Style.position = 'Absolute';
setTimeout ('RepOSDRAGObjectArray ()', 50);
}
}
if (userectangle) {
rectanglediv.style.display = 'block';
}anders{
InsertionMarkerDIV.Style.Display = 'Block';
DragdropMovelayer.Style.Display = 'Block';
}
if (userectangle) {
DragObject.Style.Left = (el_x - maus_x + e.clientx + math.max (document.body.scrollleft, document.documentElement.scrollleft)) + 'px';
DragObject.Style.top = (el_y - maus_y + e.clienty) + 'px';
}anders{
DragdropMovelayer.Style.Left = (el_x - maus_x + e.clientx + math.max (document.body.scrollleft, document.documentElement.scrollleft)) + 'px';
DragdropMovelayer.Style.top = (el_y - maus_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 (rechteckig, destinationObj ['obj']);
RepositionDagObjectArray ();
}anders{
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] ['Breite'] + 2) + 'px';
InsertionMarkerDiv.Style.top = (Gettoppos (DragableObjectArray [dest [1] -1] ['obj']) - 2) + 'px';
InsertionMarkerline.Style.Height = DragableObjectArray [dest [1] -1] ['Höhe'] + 'px';
}anders{
InsertionMarkerDiv.Style.left = (Getleftpos (destinationObj ['obj']) - 8) + 'px';
InsertionMarkerDiv.Style.top = (Gettoppos (DestinationObj ['obj']) - 2) + 'px';
InsertionMarkerline.Style.Height = destinationObj ['Höhe'] + 'px';
}
}
}
}
if (dest == 'self' ||! dest) {
InsertionMarkerDIV.Style.Display = 'none';
destinationObj = dest;
}
if (dest == 'append') {
if (userectangle) {
DragableElementsParentBox.AppendChild (rechteckig);
DragableElementsParentBox.AppendChild (document.getElementById ('Clear'));
}anders{
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 ['Höhe'] + 'px';
}
destinationObj = dest;
RepositionDagObjectArray ();
}
if (UserEctangle &&! dest) {
destinationObj = aktuellest;
}
DenceRectangLemove = false;
setTimeout ('duldRectangLemove = true', 50);
}
Funktion 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;
aktuelldest = falsch;
ResetObjectArray ();
destinationObj = false;
if (DragdropMovelayer) {
DragdropMovelayer.Style.Display = 'None';
DragdropMovelayer.innerHtml = '';
}
autoscrollactive = false;
documentsCrollHeight = document.documentElement.scrollHeight + 100;
}
Funktion CancelEvent ()
{
false zurückgeben;
}
Funktion repositionDagObjectArray ()
{
für (var no = 0; nein <dragableObjectArray.length; no ++) {
Ref = DragableObjectArray [nein];
ref ['links'] = getleftpos (ref ['obj']);
Ref ['Top'] = Gettoppos (Ref ['obj']);
}
documentsCrollHeight = document.documentElement.scrollHeight + 100;
documentHeight = document.documentElement.clientHeight;
}
Funktion ResetObjectArray ()
{
DragableObjectArray.length = 0;
var subdivs = dragableElementsParentBox.getElementsByTagName ('*');
var countel = 0;
für (var no = 0; nein <subdivs.length; no ++) {
var attr = subdivs [no] .getAttribute ('dragableBox');
if (Opera) attr = Subdivs [nein] .DagableBox;
if (attr == 'true') {
var index = dragableObjectArray.length;
DragableObjectArray [index] = new Array ();
Ref = DragableObjectArray [Index];
ref ['obj'] = subdivs [nein];
ref ['width'] = subdivs [nein] .Offsetwidth;
Ref ['Höhe'] = Subdivs [nein] .Offseteight;
ref ['links'] = getleftpos (Unters [nein]);
Ref ['Top'] = Gettoppos (Subdivs [nein]);
Ref ['Index'] = Countel;
Countel ++;
}
}
}
Funktion 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;
für (var no = 0; nein <subdivs.length; no ++) {
var attr = subdivs [no] .getAttribute ('dragableBox');
if (Opera) attr = Subdivs [nein] .DagableBox;
if (attr == 'true') {
Subdivs [nein] .Style.cursor = 'move';
Subdivs [no] .onmouseDown = initdrag;
var index = dragableObjectArray.length;
DragableObjectArray [index] = new Array ();
Ref = DragableObjectArray [Index];
ref ['obj'] = subdivs [nein];
ref ['width'] = subdivs [nein] .Offsetwidth;
Ref ['Höhe'] = Subdivs [nein] .Offseteight;
ref ['links'] = getleftpos (Unters [nein]);
Ref ['Top'] = Gettoppos (Subdivs [nein]);
Ref ['Index'] = Countel;
Countel ++;
}
}
rectanglediv = document.createelement ('div');
rectanglediv.id = 'rechteck';
rectanglediv.style.display = 'none';
DragableElementsParentBox.AppendChild (rechteckig);
document.body.onmousemove = bewegungsablagerung;
document.body.onmouseUp = stop_dragdropelement;
document.body.onSelectStart = cancelSelectionEvent;
document.body.ondragstart = covornEvent;
window.onResize = RepOSOGRAGOGObjectArray;
documentHeight = document.documentElement.clientHeight;
}
window.onload = initDRagableElements;
</script>
<div id = "maincontainer">
<!-schleppbare Inhalte starten->
<div id = "DragableElementsParentBox">
<div -dragableBox = "true" id = "article1">
<h4> Überschrift 1 </h4>
<p> splendida porro oculi Fugitant Vitantque Tueri. Sol etiam Caecat, Contra si Taucherpergas, Propterea quia vis magnast ipsius et altea? ra pro purum simulacra ferunturet feriunt oculos turbantia composituras.
</div>
<Div DragableBox = "True" id = "Artikel2">
<h4> Überschrift 2 </h4>
<p> splendida porro oculi Fugitant Vitantque Tueri. Sol etiam Caecat, Contra si Taucherpergas, Propterea quia vis magnast. </p>
</div>
<Div DragableBox = "True" id = "Artikel3">
<h4> Überschrift 3 </h4>
<p> splendida porro oculi Fugitant Vitantque Tueri. Sol etiam Caecat, Contra si Taucherpergas, Propterea quia vis magnast. </p>
</div>
<Div -dragableBox = "true" id = "article4">
<h4> Überschrift 4 </h4>
<p> splendida porro oculi Fugitant Vitantque Tueri. Sol etiam Caecat, Contra si Taucherpergas, Propterea quia vis magnast ipsius et altea? ra pro purum simulacra ferunturet feriunt oculos turbantia composituras.
</div>
<Div -DragableBox = "true" id = "Artikel 5">
<h4> Überschrift 5 </h4>
<p> splendida porro oculi Fugitant Vitantque Tueri. Sol etiam Caecat, Contra si Taucherpergas, Propterea quia vis magnast. </p>
</div>
<Div -DragableBox = "True" id = "Artikel6">
<h4> Überschrift 6 </h4>
<p> splendida porro oculi Fugitant Vitantque Tueri. Sol etiam Caecat, Contra si Taucherpergas, Propterea quia vis magnast. </p>
</div>
<Div -DragableBox = "true" id = "Artikel7">
<h4> Überschrift 7 </h4>
<p> splendida porro oculi Fugitant Vitantque Tueri. Sol etiam Caecat, Contra si Taucherpergas, Propterea quia vis magnast ipsius et altea? ra pro purum simulacra ferunturet feriunt oculos turbantia composituras.
</div>
<Div DragableBox = "True" id = "Artikel8">
<h4> Überschrift 8 </h4>
<p> splendida porro oculi Fugitant Vitantque Tueri. Sol etiam Caecat, Contra si Taucherpergas, Propterea quia vis magnast ipsius et altea? ra pro purum simulacra ferunturet feriunt oculos turbantia composituras.
</div>
<Div DragableBox = "true" id = "Artikel 9">
<h4> Überschrift 9 </h4>
<p> splendida porro oculi Fugitant Vitantque Tueri. Sol etiam Caecat, Contra si Taucherpergas, Propterea quia vis magnast ipsius et altea? ra pro purum simulacra ferunturet feriunt oculos turbantia composituras.
</div>
<div id = "clear"> </div>
</div>
<!-Ende dragbarer Inhalte->
<input type = "button" value = "speichern" onclick = "savedata ()">
</div>
<!-erforderliche 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>
<!-Ende erforderliche Divs->
</head>
<body>
</body>
</html>