复制代码代码如下:
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<title> JavaScript 模块随意拖动 </title>
<style type = "text/css">
html {
Ancho: 100%;
desbordamiento-x: oculto;
}
cuerpo{
Font-Family: Trebuchet MS, Lucida Sans Unicode, Arial, Sans-Serif;
Ancho: 100%;
margen: 0px;
relleno: 0px;
Text-Align: Center;
Color de fondo:#e2ebed;
tamaño de fuente: 0.7em;
desbordamiento-x: oculto;
}
#MainContainer {
Ancho: 600px;
margen: 0 auto;
text-align: izquierda;
Color de fondo: #fff;
}
H4 {
margen: 0px;
}
pags{
margen-top: 5px;
}
#dragableElementsParentBox {
relleno: 10px;
}
.Smaladicle, Bigartícula {
flotante: izquierda;
borde: 1px Solid #000;
Color de fondo: #DDD;
relleno: 2px;
margen-derecha: 10px;
margen de fondo: 5px;
}
.SmalLarticle img, .Bigarticle img {
flotante: izquierda;
relleno: 5px;
}
.smalteticle. RightImage, .Bigartícula .riendimage {
flotante: correcto;
}
.smaltetícula {
Ancho: 274px;
}
.bigartícula {
Ancho: 564px;
}
.claro{
claro: ambos;
}
#rectángulo{
flotante: izquierda;
borde: 1px punteado #f00;
Color de fondo: #fff;
}
#insertionmarker {
Ancho: 6px;
Posición: Absoluto;
Pantalla: ninguno;
}
#insertionmarker img {
flotante: izquierda;
}
#dragDropDropMovelayer {
Posición: Absoluto;
Pantalla: ninguno;
borde: 1px Solid #000;
Filtro: alfa (opacidad = 50);
Opacidad: 0.5;
}
</style>
<script type = "text/javaScript">
var rectangleBorDerWidth = 2;
VAR userExtangle = false;
var autoscrollspeed = 4;
función saveData ()
{
var savestring = "";
for (var no = 0; no <dragableObyCeArray.length; no ++) {
if (savestring.length> 0) savestring = savestring + ';';
ref = dragableObjectArray [no];
savestring = savestring + ref ['obj']. id;
}
alerta (savestring);
}
var dragableElementsParentBox;
var ópera = navigator.appversion.indexof ('ópera')> = 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 dragableObegetArray = new Array ();
var destinoBJ = falso;
var currentDest = false;
var de YOpLOnrectAngLemove = true;
var insertionmarkerline;
var dragDropMovelayer;
var autoscrollactive = false;
var documentHeight = false;
VAR DocumentsCrollHeight = false;
var dragAbleareaWidth = false;
función getToppos (inputObj)
{
var returnValue = inputobj.offsettop;
while ((inputObj = inputObj.OffSetParent)! = NULL) {
if (inputobj.tagname! = 'html') returnValue += inputobj.offsettop;
}
return returnValue;
}
función getLeftPos (inputObj)
{
var returnValue = inputOBJ.OffSetLeft;
while ((inputObj = inputObj.OffSetParent)! = NULL) {
if (inputObj.tagname! = 'html') returnValue += inputObj.OffSetleft;
}
return returnValue;
}
función cancelelectionEvent ()
{
if (dragDropTimer> = 0) return false;
devolver verdadero;
}
función getObjectFromposition (x, y)
{
var altura = dragoBject.Offsetheight;
var ancho = dragObject.OffSetWidth;
var indexCurrentDragObject = -5;
for (var no = 0; no <dragableObyCeArray.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) continuar;
if (x> ref ['izquierda'] && y> ref ['top'] && x <(ref ['left'] + (ref ['width']/2)) && y <(ref ['top'] + ref ['altura'])) {
if (! Userectangle && dragableObegetArray [no] ['obj'] == DragObject) return 'self';
if (indexCurrentDragObject == (no-1)) return 'self';
Array de retorno (dragableObjectArray [no], no);
}
if (x> (ref ['left'] + (ref ['width']/2)) && y> ref ['top'] && x <(ref ['left'] + ref ['width']) && y <(ref ['top'] + ref ['heart']) {
if (no <dragableObjectArray.length-1) {
if (no == indexCurrentDraGObject || (no == indexCurrentDragObject-1)) {
regresar 'yo';
}
if (dragableObjectArray [no] ['obj']! = DragObject) {
matriz de retorno (dragableObjectArray [no+1], no+1);
}demás{
if (
if (no <dragableObjectArray.length-2) return array (dragableObjectArray [no+2], no+2);
}
}demás{
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 ['altura']) && y <dragableObyCeArray [no + 1] ['top']) {
matriz de retorno (dragableObjectArray [no+1], no+1);
}
}
}
if (x> ref ['izquierda'] && y> (ref ['top'] + ref ['altura'])) return 'append';
devolver falso;
}
función initdrag (e)
{
if (document.all) e = evento;
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 (userExtangle) {
rectanglediv.style.width = this.clientwidth - (rectangleBorderDwidth*2) +'Px';
rectanglediv.style.height = this.clientHeight - (rectangleBorderDwidth*2) +'Px';
rectanglediv.classname = this.classname;
}demás{
insertionmarkerline.style.width = '6px';
}
dragDroptimer = 0;
dragoBjectNextObj = false;
if (this.nextsibling) {
dragoBjectNextObj = this.nextsibling;
if (! dragObjectNextObj.tagname) dragObjectNextObj = dragObjectNextObj.nextSibling;
}
initdragTimer ();
devolver falso;
}
función initdragTimer ()
{
if (dragDropTimer> = 0 && dragdroptimer <10) {
DragDropTimer ++;
setTimeOut ('initdragTimer ()', 5);
devolver;
}
if (dragDroptimer == 10) {
if (userExtangle) {
dragoBject.style.opacity = 0.5;
dragoBject.style.filter = 'alfa (opacidad = 50)';
dragoBject.style.cursor = 'default';
}demás{
var newObject = dragObject.clonenode (true);
dragDropMovelayer.AppendChild (NewObject);
}
}
}
Función AutoScroll (Dirección, YPOS)
{
if (document.documentelement.scrollheight> Documentscrollheight && direction> 0) return;
Window.scrollby (0, dirección);
if (dirección <0) {
if (document.documentelement.scrolltop> 0) {
mouse_y = mouse_y - dirección;
if (userExtangle) {
dragoBject.style.top = (el_y - mouse_y + ypos) + 'px';
}demás{
dragDropMovelayer.style.top = (el_y - mouse_y + ypos) + 'px';
}
}demás{
autoscrollactive = false;
}
}demás{
if (yPOS> (documentHeight-50)) {
mouse_y = mouse_y - dirección;
if (userExtangle) {
dragoBject.style.top = (el_y - mouse_y + ypos) + 'px';
}demás{
dragDropMovelayer.style.top = (el_y - mouse_y + ypos) + 'px';
}
}demás{
autoscrollactive = false;
}
}
if (autoscrollactive) setTimeOut ('AutoScroll (' + Direction + ',' + yPos + ')', 5);
}
función MovedRagableElement (E)
{
if (document.all) e = evento;
if (dragDropTimer <10) return;
if (! deslowrectangleMove) devuelve falso;
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);
}
}demás{
autoscrollactive = false;
}
if (userExtangle) {
if (dragObject.Style.Position! = 'Absolute') {
dragoBject.Style.Position = 'Absolute';
setTimeOut ('RepositionDragObjectArray ()', 50);
}
}
if (userExtangle) {
rectanglediv.style.display = 'bloque';
}demás{
InsertionMarkerDiv.style.display = 'bloque';
dragDropMovelayer.style.display = 'block';
}
if (userExtangle) {
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';
}demás{
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 (userExtangle) {
DestinationObj ['obj']. parentnode.insertbefore (rectanglediv, destinoBj ['obj']);
reposicionarDragObjectArray ();
}demás{
if (dest [1]> 0 && (dragableObyCegetArray [dest [1] -1] ['obj']. offSetleft + dragableObjectArray [dest [1] -1] ['width'] + dragObject.OffSetWidth) <dragableAleeaWidth) {
InsertionMarkerDiv.style.left = (getLeftPos (dragableObjectArray [dest [1] -1] ['obj']) + dragableObyOrray [dest [1] -1] ['width'] + 2) + 'px';
InsertionMarkerDiv.style.top = (getToppos (dragableObjectArray [dest [1] -1] ['obj']) - 2) + 'px';
InsertionMarkerLine.style.Height = DragableObegetArray [Dest [1] -1] ['altura'] + 'Px';
}demás{
InsertionMarkerDiv.style.left = (getLeftPos (DestinationObj ['obj']) - 8) + 'Px';
InsertionMarkerDiv.style.top = (getToppos (DestinationObj ['obj']) - 2) + 'Px';
InsertionMarkerLine.style.Height = DestinateObj ['altura'] + 'Px';
}
}
}
}
if (dest == 'self' ||! Dest) {
InsertionMarkerDiv.style.display = 'Ninguno';
DestinationObj = Dest;
}
if (dest == 'append') {
if (userExtangle) {
dragableElementsParentBox.appendChild (rectanglediv);
dragableElementsParentBox.AppendChild (document.getElementById ('Clear'));
}demás{
var tmpref = dragableObjectArray [dragableBegetArray.length-1];
InsertionMarkerDiv.style.left = (getLeftPos (tmpref ['obj']) + 2) + tmpref ['width'] + 'px';
InsertionMarkerDiv.style.top = (getToppos (tmpref ['obj']) - 2) + 'px';
insertionmarkerline.style.height = tmpref ['altura'] + 'px';
}
DestinationObj = Dest;
reposicionarDragObjectArray ();
}
if (userEdectangle &&! Dest) {
DestinationObj = CurrentDest;
}
DESCARTRECTANGLEMOVE = false;
setTimeOut ('DESCARTAGANGLEMOVE = True', 50);
}
function stop_dragDropelement ()
{
dragDroptimer = -1;
if (DestinestObj && DestinationObj! = 'append' && DestinationObj! = 'Self') {
DestinationObj ['obj']. parentnode.insertbefore (dragObject, destinoBj ['obj']);
}
if (destacadoBJ == 'append') {
dragableElementsParentBox.appendChild (dragObject);
dragableElementsParentBox.AppendChild (document.getElementById ('Clear'));
}
if (dragoBject && userectangle) {
dragoBject.style.opacity = 1;
dragoBject.style.filter = 'alfa (opacidad = 100)';
dragoBject.style.cursor = 'Move';
dragoBject.style.position = 'static';
}
rectanglediv.style.display = 'none';
InsertionMarkerDiv.style.display = 'Ninguno';
dragoBject = false;
currentDest = false;
reseTObjectArray ();
DestinationObj = false;
if (dragDropMovelayer) {
dragDropMovelayer.style.display = 'Ninguno';
dragDropMovelayer.innerhtml = '';
}
autoscrollactive = false;
Documentscrollheight = document.documentelement.scrollheight + 100;
}
función cancelEvent ()
{
devolver falso;
}
función repositionDragObjectArray ()
{
for (var no = 0; no <dragableObyCeArray.length; no ++) {
ref = dragableObjectArray [no];
ref ['izquierda'] = getLeftPos (ref ['obj']);
ref ['top'] = getToppos (ref ['obj']);
}
Documentscrollheight = document.documentelement.scrollheight + 100;
documentHeight = document.documentelement.clientHeight;
}
función reseToBegetArray ()
{
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 == 'verdadero') {
Var index = dragableObjectArray.length;
dragableObjectArray [index] = new Array ();
ref = dragableObjectArray [índice];
ref ['obj'] = subdivs [no];
ref ['width'] = subdivs [no] .OffSetWidth;
ref ['altura'] = subdivs [no] .Offsetheight;
ref ['izquierda'] = getLeftPos (subdivs [no]);
ref ['top'] = getToppos (subdivs [no]);
ref ['index'] = countel;
Countel ++;
}
}
}
función initdragableElements ()
{
dragableElementsParentBox = document.getElementById ('dragableElementSparentBox');
InsertionMarkerDiv = document.getElementById ('InsertionMarker');
InsertionMarkerLine = document.getElementById ('InsertionMarkerLine');
dragableAreaWidth = dragableElementsParentBox.OffSetWidth;
if (
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 == 'verdadero') {
subdivs [no] .style.cursor = 'mover';
subdivs [no] .onmouseDown = initdrag;
Var index = dragableObjectArray.length;
dragableObjectArray [index] = new Array ();
ref = dragableObjectArray [índice];
ref ['obj'] = subdivs [no];
ref ['width'] = subdivs [no] .OffSetWidth;
ref ['altura'] = subdivs [no] .Offsetheight;
ref ['izquierda'] = 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 = MovingRagableElement;
document.body.onmouseUp = stop_dragDropelement;
document.body.onselectStart = cancelelelectionEvent;
document.body.ondragStart = CancelEvent;
Window.onResize = RepositionDraGObegetArray;
documentHeight = document.documentelement.clientHeight;
}
Window.Onload = initDragableElements;
</script>
<div id = "mainContainer">
<!-Iniciar contenido dragable->
<div id = "dragableElementsParentBox">
<divirablebox = "true" id = "artículo1">
<h4> encabezado 1 </h4>
<p> Splendida Porro Oculi Fugitant Vitantque Tueri. Sol Etiam Caecat, Contra SI Tendere Pergas, Properea Quia Vis Magnast Ipsius et Altea? Ra Per Purum simulacra Ferunturet Feriunt Oculos Turbantia Comituras. </p>
</div>
<divirablebox = "true" id = "artículo2">
<h4> encabezado 2 </h4>
<p> Splendida Porro Oculi Fugitant Vitantque Tueri. Sol Etiam Caecat, Contra SI Tendere Pergas, Properea Quia Vis Magnast. </p>
</div>
<div dragableBox = "true" id = "artículo3">
<h4> encabezado 3 </h4>
<p> Splendida Porro Oculi Fugitant Vitantque Tueri. Sol Etiam Caecat, Contra SI Tendere Pergas, Properea Quia Vis Magnast. </p>
</div>
<div dragableBox = "true" id = "Artículo4">
<h4> encabezado 4 </h4>
<p> Splendida Porro Oculi Fugitant Vitantque Tueri. Sol Etiam Caecat, Contra SI Tendere Pergas, Properea Quia Vis Magnast Ipsius et Altea? Ra Per Purum simulacra Ferunturet Feriunt Oculos Turbantia Comituras. </p>
</div>
<div dragableBox = "true" id = "artículo5">
<h4> encabezado 5 </h4>
<p> Splendida Porro Oculi Fugitant Vitantque Tueri. Sol Etiam Caecat, Contra SI Tendere Pergas, Properea Quia Vis Magnast. </p>
</div>
<div dragableBox = "true" id = "artículo6">
<h4> encabezado 6 </h4>
<p> Splendida Porro Oculi Fugitant Vitantque Tueri. Sol Etiam Caecat, Contra SI Tendere Pergas, Properea Quia Vis Magnast. </p>
</div>
<div dragableBox = "true" id = "artículo 7">
<h4> encabezado 7 </h4>
<p> Splendida Porro Oculi Fugitant Vitantque Tueri. Sol Etiam Caecat, Contra SI Tendere Pergas, Properea Quia Vis Magnast Ipsius et Altea? Ra Per Purum simulacra Ferunturet Feriunt Oculos Turbantia Comituras. </p>
</div>
<div dragableBox = "true" id = "artículo 8">
<h4> encabezado 8 </h4>
<p> Splendida Porro Oculi Fugitant Vitantque Tueri. Sol Etiam Caecat, Contra SI Tendere Pergas, Properea Quia Vis Magnast Ipsius et Altea? Ra Per Purum simulacra Ferunturet Feriunt Oculos Turbantia Comituras. </p>
</div>
<divirablebox = "true" id = "artículo9">
<h4> encabezado 9 </h4>
<p> Splendida Porro Oculi Fugitant Vitantque Tueri. Sol Etiam Caecat, Contra SI Tendere Pergas, Properea Quia Vis Magnast Ipsius et Altea? Ra Per Purum simulacra Ferunturet Feriunt Oculos Turbantia Comituras. </p>
</div>
<div id = "claro"> </div>
</div>
<!-End Contenido dragable->
<input type = "button" value = "save" onClick = "saveData ()">
</div>
<!-Divs requeridos->
<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>
<!-Fin requerido Divs->
</ablo>
<Body>
</body>
</html>