复制代码代码如下:
<! 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">
<adal>
<meta http-equiv = "content-type" content = "text / html; charset = gb2312" />
<Title> JavaScript 模块随意拖动 </TITME>
<style type = "text / css">
html {
Largeur: 100%;
Overflow-X: Hidden;
}
corps{
Font-Family: Trebuchet MS, Lucida Sans Unicode, Arial, Sans-Serif;
Largeur: 100%;
marge: 0px;
rembourrage: 0px;
Texte-aligne: Centre;
Color en arrière-plan: # e2ebed;
taille de police: 0,7EM;
Overflow-X: Hidden;
}
#MainContainer {
Largeur: 600px;
marge: 0 auto;
Texte-aligne: gauche;
Color d'arrière-plan: #FFF;
}
H4 {
marge: 0px;
}
p {
marge: 5px;
}
#DragableElementsParentBox {
rembourrage: 10px;
}
.smalarticule, .bigarticle {
flottant: à gauche;
bordure: 1px solide # 000;
Color d'arrière-plan: #DDD;
rembourrage: 2px;
marge-droite: 10px;
marge-fond: 5px;
}
.smalarticle img, .bigarticle img {
flottant: à gauche;
rembourrage: 5px;
}
.SmalLarticle .Rightimage, .Bigarticle .Rightimage {
flottant: à droite;
}
.SmalLarticle {
Largeur: 274px;
}
.bigarticle {
Largeur: 564px;
}
.clair{
Clear: les deux;
}
#rectangle{
flottant: à gauche;
Border: 1px en pointillé # f00;
Color d'arrière-plan: #FFF;
}
#insertionMarker {
Largeur: 6px;
Position: absolue;
Affichage: aucun;
}
#insertionmarker img {
flottant: à gauche;
}
#DragDropMoveLayer {
Position: absolue;
Affichage: aucun;
bordure: 1px solide # 000;
filtre: alpha (opacité = 50);
Opacité: 0,5;
}
</ style>
<script type = "text / javascript">
var rectangleborderWidth = 2;
var userrectangle = false;
var autoScrollSpeed = 4;
fonction SaveData ()
{
var savestring = "";
pour (var no = 0; non <dragableObjectArray.length; no ++) {
if (Savestring.length> 0) Savestring = Savestring + ';';
Ref = dragableObjectArray [NO];
Savestring = Savestring + ref ['obj']. id;
}
alerte (Savestring);
}
var dragableElementsParentBox;
var opéra = navigator.appversion.indexof ('opéra')> = 0? true: false;
var rectanglediv = false;
var insertionmarkerDiv = false;
var souris_x;
var souris_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 dragableAwidth = false;
fonction getToppos (inputoBj)
{
var returnValue = inputoBj.OffSetTop;
while ((inputoBj = inputoBj.offsetParent)! = null) {
if (inputoBj.tagname! = 'html') returnValue + = inputoBj.offsetTop;
}
retour returnValue;
}
fonction getleftpos (inputoBj)
{
var returnValue = inputoBj.offsetLeft;
while ((inputoBj = inputoBj.offsetParent)! = null) {
if (inputoBj.tagname! = 'html') returnValue + = inputoBj.offsetLeft;
}
retour returnValue;
}
fonction cancelselectionevent ()
{
if (dragdroptimer> = 0) return false;
Retour Vrai;
}
fonction getObjectFromposition (x, y)
{
var height = dragObject.offsetheight;
var width = dragObject.offsetWidth;
var indexCurrentDragObject = -5;
pour (var no = 0; non <dragableObjectArray.length; no ++) {
Ref = dragableObjectArray [NO];
if (ref ['obj'] == dragObject) indexCurrentDragObject = no;
if (non <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)) renvoie '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 (non <dragableObjectArray.length-1) {
if (no == indexCurrentDragObject || (no == indexCurrentDragObject-1)) {
retour «soi»;
}
if (dragableObjectArray [non] ['obj']! = dragObject) {
Return Array (dragableObjectArray [NO + 1], NO + 1);
}autre{
if (! userEctangle) return 'self';
if (non <dragableObjectArray.length-2) Return Array (dragableObjectArray [no + 2], no + 2);
}
}autre{
if (dragableObjectArray [dragableObjectArray.length-1] ['obj']! = dragObject) return 'append';
}
}
if (non <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';
retourne false;
}
fonction initdrag (e)
{
if (document.all) e = événement;
souris_x = e.clientx;
souris_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;
}autre{
insertionmarkerline.style.width = '6px';
}
DragDroptimer = 0;
dragObjectNextObj = false;
if (this.nextsibling) {
dragObjectNextObj = this.nextsibling;
if (! dragObjectNextObj.tagname) dragObjectNextObj = dragObjectNextObj.NextSibling;
}
initDragtimer ();
retourne false;
}
fonction initDragtimer ()
{
if (dragdroptimer> = 0 && dragdroptimer <10) {
DragDroptimer ++;
setTimeout ('initDragtimer ()', 5);
retour;
}
if (dragdroptimer == 10) {
if (userEctAngle) {
DragObject.style.opacity = 0,5;
dragObject.style.filter = 'alpha (opacité = 50)';
dragObject.style.cursor = 'default';
}autre{
var newObject = dragObject.clonenode (true);
DragDropMovelayer.ApendChild (NewObject);
}
}
}
fonction Autoscroll (Direction, YPOS)
{
if (document.DocumentElement.ScrollHeight> DocumentsCrollHeight && Direction> 0) return;
window.scrollby (0, direction);
if (direction <0) {
if (document.DocumentElement.ScrollTop> 0) {
souris_y = souris_y - direction;
if (userEctAngle) {
dragObject.style.top = (EL_Y - MOUSE_Y + YPOS) + 'PX';
}autre{
DragDropMoveLayer.Style.Top = (EL_Y - MOUSE_Y + YPOS) + 'PX';
}
}autre{
autoScrollActive = false;
}
}autre{
if (ypos> (documentHeight-50)) {
souris_y = souris_y - direction;
if (userEctAngle) {
dragObject.style.top = (EL_Y - MOUSE_Y + YPOS) + 'PX';
}autre{
DragDropMoveLayer.Style.Top = (EL_Y - MOUSE_Y + YPOS) + 'PX';
}
}autre{
autoScrollActive = false;
}
}
if (AutoScrollActive) setTimeout ('AutoScroll (' + Direction + ',' + YPOS + ')', 5);
}
fonction MovRagableElement (e)
{
if (document.all) e = événement;
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);
}
}autre{
autoScrollActive = false;
}
if (userEctAngle) {
if (dragObject.style.position! = 'Absolue') {
DragObject.Style.Position = 'Absolute';
setTimeout ('repositionDragObjectArray ()', 50);
}
}
if (userEctAngle) {
rectanglediv.style.display = 'bloc';
}autre{
insertionmarkerdiv.style.display = 'bloc';
DragDropMoveLayer.Style.Display = 'Block';
}
if (userEctAngle) {
dragObject.style.left = (el_x - souris_x + e.clientx + math.max (document.body.scrollleft, document.documentElement.scrollleft)) + 'px';
dragObject.style.top = (el_y - souris_y + e.clienty) + 'px';
}autre{
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 = getObjectFroposition (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 ();
}autre{
if (dest [1]> 0 && (dragableObjectArray [dest [1] -1] ['obj']. offsetLeft + dragableObjectArray [dest [1] -1] ['width'] + dragObject.offsetWidth) <RagableAreAwidth) {
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';
}autre{
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 = 'Aucun';
DestinationObj = dest;
}
if (dest == 'ajout') {
if (userEctAngle) {
DragableElementsParentBox.ApendChild (rectanglediv);
DragableElementsParentBox.ApendChild (document.getElementById ('Clear'));
}autre{
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);
}
fonction stop_dragdropement ()
{
DragDroptimer = -1;
if (DestinationObj && DestinationObj! = 'APPEND' && DestinationObj! = 'self') {
DestinationObj ['OBJ']. ParentNode.InsertBefore (DragObject, DestinationObj ['OBJ']);
}
if (DestinationObj == 'APPEND') {
dragableElementsParentBox.ApendChild (dragObject);
DragableElementsParentBox.ApendChild (document.getElementById ('Clear'));
}
if (dragObject && userEctangle) {
dragObject.style.opacity = 1;
dragObject.style.filter = 'alpha (opacité = 100)';
dragObject.style.cursor = 'Move';
dragObject.style.position = «statique»;
}
rectanglediv.style.display = 'Aucun';
insertionmarkerdiv.style.display = 'Aucun';
dragObject = false;
currentDest = false;
resetObjectArray ();
DestinationOBj = false;
if (dragdropmovelayer) {
DragDropMoveLayer.Style.Display = 'Aucun';
DragDropMoveLayer.InnerHtml = '';
}
autoScrollActive = false;
DocumentsCrollHeight = document.DocumentElement.ScrollHeight + 100;
}
Function CancelEvent ()
{
retourne false;
}
fonction repositionDragObjectArray ()
{
pour (var no = 0; non <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;
}
fonction resetObjectArray ()
{
dragableObjectArray.length = 0;
var subdivs = dragableElementsParentBox.getElementsByTagName ('*');
var adornel = 0;
for (var no = 0; non <subdivs.length; no ++) {
var attR = subdivs [non] .getAttribute ('dragablebox');
if (Opera) atTr = subdivs [NO] .DragableBox;
if (att == 'true') {
var index = dragableObjectArray.length;
dragableObjectArray [index] = new Array ();
ref = dragableObjectArray [index];
Ref ['obj'] = subdivs [NO];
ref ['width'] = subdivs [non] .offsetWidth;
ref ['height'] = subdivs [no] .offsetheight;
ref ['gauche'] = getleftPos (subdivs [no]);
ref ['top'] = getToppos (subdivs [no]);
ref ['index'] = comtel;
comtel ++;
}
}
}
fonction 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.ApendChild (DragDropMoveLayer);
}
var subdivs = dragableElementsParentBox.getElementsByTagName ('*');
var adornel = 0;
for (var no = 0; non <subdivs.length; no ++) {
var attR = subdivs [non] .getAttribute ('dragablebox');
if (Opera) atTr = subdivs [NO] .DragableBox;
if (att == 'true') {
subdivs [no] .style.cursor = 'move';
subdivs [non] .onmousedown = initDrag;
var index = dragableObjectArray.length;
dragableObjectArray [index] = new Array ();
ref = dragableObjectArray [index];
Ref ['obj'] = subdivs [NO];
ref ['width'] = subdivs [non] .offsetWidth;
ref ['height'] = subdivs [no] .offsetheight;
ref ['gauche'] = getleftPos (subdivs [no]);
ref ['top'] = getToppos (subdivs [no]);
ref ['index'] = comtel;
comtel ++;
}
}
rectanglediv = document.CreateElement ('div');
rectanglediv.id = 'rectangle';
rectanglediv.style.display = 'Aucun';
DragableElementsParentBox.ApendChild (rectanglediv);
document.body.onmouseMove = MouteRagableElement;
document.body.onmouseup = stop_dragdropelement;
document.body.onselectStart = cancelSelectionEvent;
document.body.ondRagStart = CancelEvent;
window.onresize = repositionDragObjectArray;
DocumentHeight = document.DocumentElement.ClientHeight;
}
window.onload = initDragableElements;
</cript>
<div id = "MainContainer">
<! - Démarrez le contenu dragable ->
<div id = "dragableElementsParentBox">
<div dragablebox = "true" id = "article1">
<h4> En-tête 1 </h4>
<p> splendida porro occuli fugitant vitantque tueri. Sol Etiam Caecat, Contra Si Tendere Pergas, Proterea quia vis Magnast Ipsius et altea? Ra par purum simulacra ferunturet feriunt oculos turbantia composituras. </p>
</div>
<div dragablebox = "true" id = "article2">
<h4> En-tête 2 </h4>
<p> splendida porro occuli fugitant vitantque tueri. Sol Etiam Caecat, Pergas de Tendere Contra si, propterea quia vis Magnast. </p>
</div>
<div dragablebox = "true" id = "Article3">
<h4> En-tête 3 </h4>
<p> splendida porro occuli fugitant vitantque tueri. Sol Etiam Caecat, Pergas de Tendere Contra si, propterea quia vis Magnast. </p>
</div>
<div dragablebox = "true" id = "Article4">
<h4> En-tête 4 </h4>
<p> splendida porro occuli fugitant vitantque tueri. Sol Etiam Caecat, Contra Si Tendere Pergas, Proterea quia vis Magnast Ipsius et altea? Ra par purum simulacra ferunturet feriunt oculos turbantia composituras. </p>
</div>
<div dragablebox = "true" id = "Article5">
<h4> En-tête 5 </h4>
<p> splendida porro occuli fugitant vitantque tueri. Sol Etiam Caecat, Pergas de Tendere Contra si, propterea quia vis Magnast. </p>
</div>
<div dragablebox = "true" id = "Article6">
<h4> En-tête 6 </h4>
<p> splendida porro occuli fugitant vitantque tueri. Sol Etiam Caecat, Pergas de Tendere Contra si, propterea quia vis Magnast. </p>
</div>
<div dragablebox = "true" id = "Article7">
<h4> En-tête 7 </h4>
<p> splendida porro occuli fugitant vitantque tueri. Sol Etiam Caecat, Contra Si Tendere Pergas, Proterea quia vis Magnast Ipsius et altea? Ra par purum simulacra ferunturet feriunt oculos turbantia composituras. </p>
</div>
<div dragablebox = "true" id = "Article8">
<h4> En-tête 8 </h4>
<p> splendida porro occuli fugitant vitantque tueri. Sol Etiam Caecat, Contra Si Tendere Pergas, Proterea quia vis Magnast Ipsius et altea? Ra par purum simulacra ferunturet feriunt oculos turbantia composituras. </p>
</div>
<div dragablebox = "true" id = "Article9">
<h4> En-tête 9 </h4>
<p> splendida porro occuli fugitant vitantque tueri. Sol Etiam Caecat, Contra Si Tendere Pergas, Proterea quia vis Magnast Ipsius et altea? Ra par purum simulacra ferunturet feriunt oculos turbantia composituras. </p>
</div>
<div id = "clear"> </div>
</div>
<! - Fin du contenu dragable ->
<input type = "bouton" value = "enregistrer" onclick = "savedata ()">
</div>
<! - Divs requis ->
<div id = "insertionmarker">
<img src = "/ jscss / démoimg / 200906 / marker_top.gif">
<img src = "/ jscss / démoimg / 200906 / marker_middle.gif" id = "insertionmarkerline">
<img src = "/ jscss / démoimg / 200906 / marker_bottom.gif">
</div>
<! - Fin des divs requis ->
</ head>
<body>
</docy>
</html>