复制代码代码如下:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<title> javascript 模块随意拖动 </ititle>
<style type = "text/css">
html {
largura: 100%;
Overflow-x: Hidden;
}
corpo{
Fonte-família: Trebuchet MS, Lucida Sans Unicode, Arial, Sans-Serif;
largura: 100%;
margem: 0px;
preenchimento: 0px;
Alinhamento de texto: centro;
Background-Color:#e2ebed;
tamanho de fonte: 0.7em;
Overflow-x: Hidden;
}
#MaiContainer {
Largura: 600px;
margem: 0 automático;
Alinhamento de texto: esquerda;
Background-Color: #FFF;
}
H4 {
margem: 0px;
}
P {
Margin-top: 5px;
}
#DragableElementsParentBox {
preenchimento: 10px;
}
.smallartic, .bigarticle {
flutuar: esquerda;
borda: 1px sólido #000;
Background-Color: #DDD;
preenchimento: 2px;
Margem-direita: 10px;
Bottom de margem: 5px;
}
.smallarticle img, .bigarticle img {
flutuar: esquerda;
preenchimento: 5px;
}
.smallarticle .rightImage, .bigarticle .rightImage {
Float: Certo;
}
.smallarticle {
Largura: 274px;
}
.bigarticle {
Largura: 564px;
}
.claro{
claro: ambos;
}
#retângulo{
flutuar: esquerda;
borda: 1px pontilhado #f00;
Background-Color: #FFF;
}
#insertionmarker {
Largura: 6px;
Posição: Absoluto;
Exibir: Nenhum;
}
#insertionmarker img {
flutuar: esquerda;
}
#dragdropmovelayer {
Posição: Absoluto;
Exibir: Nenhum;
borda: 1px sólido #000;
filtro: alfa (opacidade = 50);
Opacidade: 0,5;
}
</style>
<script type = "text/javascript">
var rectangleBorderwidth = 2;
var userectangle = false;
Var AUTOSCROLLSPEED = 4;
função savedata ()
{
var SaveString = "";
for (var no = 0; não <dragableObjectArray.length; no ++) {
if (savestring.length> 0) SaveString = SaveString + ';';
ref = dragableObjectArray [NO];
savestring = sanestring + ref ['obj']. id;
}
alerta (savestring);
}
var dragableElementsParentBox;
var opera = navegator.appVersion.indexOf ('Opera')> = 0? true: false;
var retanglediv = 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 destinooBJ = false;
var currentDest = false;
var allowRectanGleMove = true;
var insertionmarkerline;
var dragdropmovelayer;
var autoscrollative = false;
var documentHeight = false;
var documentsCrolHeight = false;
var dragubableareawidth = false;
função gettoppos (inputObJ)
{
var returnValue = inputObj.offsetTop;
while ((inputObj = inputObj.offsetParent)! = null) {
if (inputObj.tagname! = 'html') returnValue += inputObj.offsetTop;
}
return retornValue;
}
função getLeftpos (inputObJ)
{
var returnValue = inputObj.OffSetLeft;
while ((inputObj = inputObj.offsetParent)! = null) {
if (inputObj.tagname! = 'html') returnValue += inputObj.offsetleft;
}
return retornValue;
}
função cancelselectionEvent ()
{
if (dragdroptimer> = 0) retornar false;
retornar true;
}
função getObjectFroSition (x, y)
{
altura var = dragobject.offsetHeight;
var largura = dragobject.offsetWidth;
var indexCurrentDraGObject = -5;
for (var no = 0; não <dragableObjectArray.length; no ++) {
ref = dragableObjectArray [NO];
if (ref ['obj'] == dragobject) indexCurrentDragoBject = NO;
if (não <dragableObjectArray.Length-1 && DragableObjectArray [NO+1] ['obj'] == dragoBject) indexCurrentDragoBject = Não+1;
if (ref ['obj'] == dragobject && userectangle) continue;
if (x> ref ['esquerda'] && y> ref ['top'] && x <(ref ['esquerda'] + (ref ['width']/2)) && y <(ref ['top'] + ref ['altura'])) {
if (! userectangle && dragableObjectArray [no] ['obj'] == dragobject) retornar 'self';
if (indexCurrentDraGObject == (no-1)) retornará 'self';
Retornar Array (DragableObjectArray [não], não);
}
if (x> (ref ['esquerda'] + (ref ['width']/2)) && y> ref ['top'] && x <(ref ['esquerd
if (não <dragableObjectArray.length-1) {
if (no == indexCurrentDraGObject || (no == indexCurrentDraGObject-1)) {
retornar 'eu';
}
if (dragableObjectArray [não] ['obj']! = dragobject) {
Retornar Array (DragableObjectArray [não+1], não+1);
}outro{
if (! userectangle) retorne 'self';
if (não <dragableObjectArray.length-2) Retorno (dragableObjectArray [não+2], não+2);
}
}outro{
if (dragableObjectArray [dragableObjectArray.length-1] ['obj']! = dragobject) retornar 'append';
}
}
if (não <dragableObjectArray.length-1) {
if (x> (ref ['esquerda'] + ref ['width'])) && y> ref ['top'] && y <(ref ['top'] + ref ['altura']) && y <dragableObjectArray [no + 1] ['top']) {
Retornar Array (DragableObjectArray [não+1], não+1);
}
}
}
if (x> ref ['esquerda'] && y> (ref ['top'] + ref ['altura')) retornar 'append';
retornar falso;
}
função initdrag (e)
{
if (document.all) e = evento;
mouse_x = e.clientX;
mouse_y = e.clienty;
if (! DocumentsCrolHeight) documentsCrolHeight = document.documentElement.scrolHeight + 100;
el_x = getLeftpos (this)/1;
el_y = gettoppos (this)/1;
dragobject = this;
if (userectangle) {
retanglediv.style.width = this.clientWidth - (RectangleBorderwidth*2) +'px';
retanglediv.style.Height = this.clientHeight - (RetangleBordDerwidth*2) +'px';
retanglediv.className = this.className;
}outro{
insertionmarkerline.style.width = '6px';
}
dragdroptimer = 0;
dragObjectNexTOBJ = false;
if (this.nextsibling) {
dragoBjectNexTOBJ = this.Nextsibling;
if (! dragoBjectNexTOBJ.TAGNAME) DragoBjectNexTOBJ = DragoBjectNexTOBJ.Nextsibling;
}
initdragtimer ();
retornar falso;
}
função initdragtimer ()
{
if (dragdroptimer> = 0 && dragdroptimer <10) {
dragdroptimer ++;
setTimeout ('initDragtimer ()', 5);
retornar;
}
if (dragdroptimer == 10) {
if (userectangle) {
dragObject.style.Opacity = 0,5;
dragObject.style.filter = 'alfa (opacidade = 50)';
dragObject.style.cursor = 'default';
}outro{
var newObject = dragobject.clOneNode (true);
dragdropmovelayer.appendChild (newObject);
}
}
}
Função AUTOSCROLL (Direção, YPOS)
{
if (document.documentElement.scrolHeight> documentsCrolHeight && direction> 0) retornar;
window.scrollby (0, direção);
if (direção <0) {
if (document.documentElement.scrolltop> 0) {
mouse_y = mouse_y - direção;
if (userectangle) {
dragobject.style.top = (el_y - mouse_y + ypos) + 'px';
}outro{
dragdropmovelayer.style.top = (el_y - mouse_y + ypos) + 'px';
}
}outro{
AUTOSCROLLACTION = FALSE;
}
}outro{
if (ypos> (documentHeight-50)) {
mouse_y = mouse_y - direção;
if (userectangle) {
dragobject.style.top = (el_y - mouse_y + ypos) + 'px';
}outro{
dragdropmovelayer.style.top = (el_y - mouse_y + ypos) + 'px';
}
}outro{
AUTOSCROLLACTION = FALSE;
}
}
if (AutoScRollative) setTimeout ('AUTOSCROLL (' + DIREÇÃO + ',' + YPOS + '), 5);
}
função moveragableElement (e)
{
if (document.all) e = evento;
if (dragdroptimer <10) retornar;
if (! permitir -seRectanGleMove) retornar FALSE;
if (e.clienty <50 || e.clienty> (documentHeight-50)) {
if (e.clienty <50 &&! Autoscrollative) {
AutoScrollative = true;
AUTOSCROLL ((AUTOSCROLLSPEED*-1), E.Clienty);
}
if (e.clienty> (documentHeight-50) && document.documentElement.scrolHeight <= documentsCrolHeight &&! Autoscrollative) {
AutoScrollative = true;
AUTOSCROLL (AUTOSCROLLSPEED, E.Clienty);
}
}outro{
AUTOSCROLLACTION = FALSE;
}
if (userectangle) {
if (dragobject.style.Position! = 'Absolute') {
dragObject.style.Position = 'Absolute';
setTimeout ('repositionDragoBjectArray ()', 50);
}
}
if (userectangle) {
retanglediv.style.display = 'bloco';
}outro{
insertionmarkerdiv.style.display = 'bloco';
dragdropmovelayer.style.display = 'bloco';
}
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';
}outro{
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 = getObjectFroSition (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'].
repositionDragObjectArray ();
}outro{
if (dest [1]> 0 && (dragableObjectArray [dest [1] -1] ['obj']. Offsetleft + dragableObjectArray [dest [1] -1] ['width'] + dragobject.offsetWidth) <dragableAlEAwidthth) {
insertionmarkerdiv.style.left = (getLeftpos (dragableObjectArray [dest [1] -1] ['obj'])) + dragableObjectArray [dest [1] -1] ['largura'] + 2) + 'px';
insertionmarkerdiv.style.top = (gettoppos (dragableObjectArray [dest [1] -1] ['obj']) - 2) + 'px';
insertionmarkerline.style.Height = dragableObjectArray [dest [1] -1] ['altura'] + 'px';
}outro{
insertionmarkerdiv.style.left = (getLeftpos (destinoObj ['obj']) - 8) + 'px';
insertionmarkerdiv.style.top = (gettoppos (destinoObj ['obj']) - 2) + 'px';
insertionmarkerline.style.Height = DestinationObj ['Hight'] + 'PX';
}
}
}
}
if (dest == 'self' ||! dest) {
insertionmarkerdiv.style.display = 'nenhum';
destinationObj = dest;
}
if (dest == 'Append') {
if (userectangle) {
dragableElementsParentBox.appendChild (retanglediv);
dragableElementsParentBox.appendChild (document.getElementById ('clear'));
}outro{
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 ['altura'] + 'px';
}
destinationObj = dest;
repositionDragObjectArray ();
}
if (userectangle &&! dest) {
destinationObj = CurrentDest;
}
allowRectanGleMove = false;
setTimeout ('allowRectanGleMove = true', 50);
}
função stop_dragdropelement ()
{
dragDroptimer = -1;
if (DestinationObj && DestinationObj! = 'Append' && DestinationObj! = 'self') {
DestinationObj ['obj'].
}
if (destinationObj == 'Append') {
dragableElementsParentBox.AppendChild (Dragobject);
dragableElementsParentBox.appendChild (document.getElementById ('clear'));
}
if (dragobject && userectangle) {
dragObject.style.Opacity = 1;
dragObject.style.filter = 'alfa (opacidade = 100)';
dragObject.style.cursor = 'move';
dragObject.style.Position = 'static';
}
retanglediv.style.display = 'nenhum';
insertionmarkerdiv.style.display = 'nenhum';
dragObject = false;
currentDest = false;
resetobjectArray ();
destinationObj = false;
if (dragdropmovelayer) {
dragdropmovelayer.style.display = 'nenhum';
dragdropmovelayer.innerhtml = '';
}
AUTOSCROLLACTION = FALSE;
documentsCrolHeight = document.documentElement.scrolHeight + 100;
}
função cancevent ()
{
retornar falso;
}
função repositionDragoBjectArray ()
{
for (var no = 0; não <dragableObjectArray.length; no ++) {
ref = dragableObjectArray [NO];
ref ['esquerda'] = getLeftPos (ref ['obj']);
ref ['top'] = gettoppos (ref ['obj']);
}
documentsCrolHeight = document.documentElement.scrolHeight + 100;
documentHeight = document.documentElement.clientHeight;
}
função resetobjectArray ()
{
dragableObjectArray.length = 0;
var subdivs = dragableElementsParentBox.getElementsByTagName ('*');
var countel = 0;
for (var no = 0; não <subdivs.length; no ++) {
var att = subdivs [no] .getAttribute ('dragablebox');
if (Ópera) att = subdivs [no] .DragableBox;
if (att == 'true') {
var index = dragableObjectArray.length;
dragableObjectArray [index] = new Array ();
ref = dragableObjectArray [index];
ref ['obj'] = subdivs [não];
ref ['width'] = subdivs [NO] .offsetWidth;
ref ['altura'] = subdivs [NO] .offSethEight;
ref ['esquerda'] = getLeftPos (subdivs [NO]);
ref ['top'] = gettoppos (subdivs [NO]);
ref ['index'] = Countel;
Countel ++;
}
}
}
função 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;
for (var no = 0; não <subdivs.length; no ++) {
var att = subdivs [no] .getAttribute ('dragablebox');
if (Ópera) att = subdivs [no] .DragableBox;
if (att == 'true') {
subdivs [não] .style.cursor = 'move';
subdivs [não] .onMouseDown = initdrag;
var index = dragableObjectArray.length;
dragableObjectArray [index] = new Array ();
ref = dragableObjectArray [index];
ref ['obj'] = subdivs [não];
ref ['width'] = subdivs [NO] .offsetWidth;
ref ['altura'] = subdivs [NO] .offSethEight;
ref ['esquerda'] = getLeftPos (subdivs [NO]);
ref ['top'] = gettoppos (subdivs [NO]);
ref ['index'] = Countel;
Countel ++;
}
}
retanglediv = document.createElement ('div');
retanglediv.id = 'retângulo';
retanglediv.style.display = 'nenhum';
dragableElementsParentBox.appendChild (retanglediv);
document.body.onmouseMove = moveragableElement;
document.body.onMouseUp = STOP_DRAGDROPELEMENT;
document.body.OnselectStart = canceLelectionEvent;
document.body.ondragstart = cancevent;
window.onResize = repositionDragoBjectArray;
documentHeight = document.documentElement.clientHeight;
}
window.onload = initdragableElements;
</script>
<div id = "mainContainer">
<!-Inicie o conteúdo arrastável->
<div id = "dragableElementsParentBox">
<div dragablebox = "true" id = "article1">
<H4> Cabeçando 1 </h4>
<p> splendida porco oculi fugitant Vitantque tueri. Sol Etiam Ceecat, Contra Si Tendere Pergas, Propterea quia Vis Magnast Ipsius et Altea?
</div>
<div dragablebox = "true" id = "article2">
<H4> Cabeçando 2 </h4>
<p> splendida porco oculi fugitant Vitantque tueri. Sol Etiam Ceecat, Contra Si Tendere Pergas, Propterea quia Vis Magnast. </p>
</div>
<div dragablebox = "true" id = "article3">
<H4> Cabeçando 3 </h4>
<p> splendida porco oculi fugitant Vitantque tueri. Sol Etiam Ceecat, Contra Si Tendere Pergas, Propterea quia Vis Magnast. </p>
</div>
<div dragablebox = "true" id = "article4">
<H4> Cabeçando 4 </h4>
<p> splendida porco oculi fugitant Vitantque tueri. Sol Etiam Ceecat, Contra Si Tendere Pergas, Propterea quia Vis Magnast Ipsius et Altea?
</div>
<div dragablebox = "true" id = "article5">
<H4> Cabeçando 5 </h4>
<p> splendida porco oculi fugitant Vitantque tueri. Sol Etiam Ceecat, Contra Si Tendere Pergas, Propterea quia Vis Magnast. </p>
</div>
<div dragablebox = "true" id = "article6">
<H4> Cabeçando 6 </h4>
<p> splendida porco oculi fugitant Vitantque tueri. Sol Etiam Ceecat, Contra Si Tendere Pergas, Propterea quia Vis Magnast. </p>
</div>
<div dragablebox = "true" id = "article7">
<H4> Cabeçando 7 </h4>
<p> splendida porco oculi fugitant Vitantque tueri. Sol Etiam Ceecat, Contra Si Tendere Pergas, Propterea quia Vis Magnast Ipsius et Altea?
</div>
<div dragablebox = "true" id = "article8">
<H4> Cabeçando 8 </h4>
<p> splendida porco oculi fugitant Vitantque tueri. Sol Etiam Ceecat, Contra Si Tendere Pergas, Propterea quia Vis Magnast Ipsius et Altea?
</div>
<div dragablebox = "true" id = "article9">
<H4> Cabeçando 9 </h4>
<p> splendida porco oculi fugitant Vitantque tueri. Sol Etiam Ceecat, Contra Si Tendere Pergas, Propterea quia Vis Magnast Ipsius et Altea?
</div>
<div id = "clear"> </div>
</div>
<!-Conteúdo arrastável final->
<input type = "button" value = "salvar" onclick = "savedata ()">
</div>
<!-divs obrigatório->
<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>
<!-END DIV DIVIS DE NECESSÁRIOS->
</head>
<Body>
</body>
</html>