JavaScript module Drag sample code at will _javascript tips

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>javascript Module Free Drag </title>
<style type= "Text/css" >
html{
width:100%;
Overflow-x:hidden;
}
body{
Font-family:trebuchet MS, Lucida Sans Unicode, Arial, Sans-serif;
width:100%;
margin:0px;
padding:0px;
Text-align:center;
Background-color: #E2EBED;
Font-size:0.7em;
Overflow-x:hidden;
}

#mainContainer {
width:600px;
margin:0 Auto;
Text-align:left;
Background-color: #FFF;
}
h4{
margin:0px;
}
p{
margin-top:5px;
}
#dragableElementsParentBox {
padding:10px;
}

. smallarticle,.bigarticle{
Float:left;
border:1px solid #000;
Background-color: #DDD;
padding:2px;
margin-right:10px;
margin-bottom:5px;
}
. smallarticle img,.bigarticle img{
Float:left;
padding:5px;
}
. smallarticle. rightimage,.bigarticle. rightimage{
Float:right;
}
. smallarticle{
width:274px;
}
. bigarticle{
width:564px;
}
. clear{
Clear:both;
}

#rectangle {
Float:left;
border:1px dotted #F00;
Background-color: #FFF;
}
#insertionMarker {
width:6px;
Position:absolute;
Display:none;
}
#insertionMarker img{
Float:left;
}
#dragDropMoveLayer {
Position:absolute;
Display:none;
border:1px solid #000;
Filter:alpha (OPACITY=50);
opacity:0.5;
}

</style>

<script type= "Text/javascript" >
var rectangleborderwidth = 2;
var userectangle = false;
var autoscrollspeed = 4;
function 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;
}

alert (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;
function Gettoppos (inputobj)
{
var returnvalue = inputobj.offsettop;
while ((inputobj = inputobj.offsetparent)!= null) {
if (inputobj.tagname!= ' HTML ') returnvalue + = Inputobj.offsettop;
}
Return returnvalue;
}

function Getleftpos (inputobj)
{
var returnvalue = Inputobj.offsetleft;
while ((inputobj = inputobj.offsetparent)!= null) {
if (inputobj.tagname!= ' HTML ') returnvalue + = Inputobj.offsetleft;
}
Return returnvalue;
}

function Cancelselectionevent ()
{
if (dragdroptimer>=0) return false;
return true;
}

function 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) 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)) return ' self ';
Return Array (Dragableobjectarray[no],no);
}

if (x > (ref[' left '] + (ref[' width ']/2)) && y>ref[' top '] && x< (ref[' left '] + ref[' width ') && Amp y< (ref[' top '] + ref[' height ')) {
if (no<dragableobjectarray.length-1) {
if (No==indexcurrentdragobject | | (no==indexcurrentdragobject-1)) {
return ' self ';
}
if (dragableobjectarray[no][' obj ']!=dragobject) {
Return Array (dragableobjectarray[no+1],no+1);
}else{
if (!userectangle) return ' self ';
if (no<dragableobjectarray.length-2) return Array (dragableobjectarray[no+2],no+2);
}
}else{
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 ';
return false;
}

function 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;
}else{
InsertionMarkerLine.style.width = ' 6px ';
}
Dragdroptimer = 0;
Dragobjectnextobj = false;
if (this.nextsibling) {
Dragobjectnextobj = this.nextsibling;
if (!dragobjectnextobj.tagname) dragobjectnextobj = dragobjectnextobj.nextsibling;
}
Initdragtimer ();
return false;
}

function Initdragtimer ()
{
if (dragdroptimer>=0 && dragdroptimer<10) {
dragdroptimer++;
SetTimeout (' Initdragtimer () ', 5);
Return
}
if (dragdroptimer==10) {

if (Userectangle) {
dragObject.style.opacity = 0.5;
DragObject.style.filter = ' alpha (opacity=50) ';
DragObject.style.cursor = ' default ';
}else{
var newobject = Dragobject.clonenode (true);
Dragdropmovelayer.appendchild (NewObject);
}
}
}

function AutoScroll (Direction,ypos)
{
if (document.documentelement.scrollheight>documentscrollheight && direction>0) return;
Window.scrollby (0,direction);
if (direction<0) {
if (document.documentelement.scrolltop>0) {
mouse_y = mouse_y-direction;
if (Userectangle) {
DragObject.style.top = (el_y-mouse_y + yPos) + ' px ';
}else{
DragDropMoveLayer.style.top = (el_y-mouse_y + yPos) + ' px ';
}
}else{
Autoscrollactive = false;
}
}else{
if (ypos> (documentHeight-50)) {

mouse_y = mouse_y-direction;
if (Userectangle) {
DragObject.style.top = (el_y-mouse_y + yPos) + ' px ';
}else{
DragDropMoveLayer.style.top = (el_y-mouse_y + yPos) + ' px ';
}
}else{
Autoscrollactive = false;
}
}
if (autoscrollactive) settimeout (' AutoScroll (' +direction+ ', ' + YPos + ') ', 5);
}

function Movedragableelement (e)
{
if (document.all) e = event;

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);
}
}else{
Autoscrollactive = false;
}
if (Userectangle) {
if (dragobject.style.position!= ' absolute ') {
dragObject.style.position = ' absolute ';
SetTimeout (' Repositiondragobjectarray () ', 50);
}
}

if (Userectangle) {
rectanglediv.style.display= ' block ';
}else{
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 ';
}else{
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 ();
}else{
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 [' width '] + 2) + ' px ';
InsertionMarkerDiv.style.top = (Gettoppos (dragableobjectarray[dest[1]-1][' obj ')-2) + ' px ';
InsertionMarkerLine.style.height = dragableobjectarray[dest[1]-1][' height '] + ' px ';
}else{
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 '));
}else{
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);
}

function 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;
Currentdest = false;
Resetobjectarray ();
Destinationobj = false;
if (Dragdropmovelayer) {
Dragdropmovelayer.style.display= ' None ';
Dragdropmovelayer.innerhtml= ';
}
Autoscrollactive = false;
Documentscrollheight = document.documentElement.scrollHeight + 100;
}

function CancelEvent ()
{
return false;
}

function 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++;
}
}
}

function 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;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 = movedragableelement;
Document.body.onmouseup = stop_dragdropelement;
Document.body.onselectstart = cancelselectionevent;
Document.body.ondragstart = CancelEvent;
Window.onresize = Repositiondragobjectarray;
Documentheight = Document.documentElement.clientHeight;
}

Window.onload = initdragableelements;
</script>

<div id= "Maincontainer" >
<!--START dragable CONTENT-->
<div id= "Dragableelementsparentbox" >
<div class= "Bigarticle" dragablebox= "true" id= "Article1" >
<p>splendida porro oculi fugitant vitantque tueri. Sol Etiam caecat, contra si tendere pergas,propterea quia vis magnast Ipsius et altea?ra per purum simulacra ferunturet fe Riunt Oculos Turbantia composituras.</p>
</div>
<div class= "Smallarticle" dragablebox= "true" id= "Article2" >
<p>splendida porro oculi fugitant vitantque tueri. Sol Etiam caecat, contra si tendere pergas,propterea quia vis magnast.</p>
</div>
<div class= "Smallarticle" dragablebox= "true" id= "Article3" >
<p>splendida porro oculi fugitant vitantque tueri. Sol Etiam caecat, contra si tendere pergas,propterea quia vis magnast.</p>
</div>
<div class= "Bigarticle" dragablebox= "true" id= "Article4" >
<p> splendida porro oculi fugitant vitantque tueri. Sol Etiam caecat, contra si tendere pergas,propterea quia vis magnast Ipsius et altea?ra per purum simulacra ferunturet fe Riunt Oculos Turbantia composituras.</p>
</div>
<div class= "Smallarticle" dragablebox= "true" id= "Article5" >
<p>splendida porro oculi fugitant vitantque tueri. Sol Etiam caecat, contra si tendere pergas,propterea quia vis magnast.</p>
</div>
<div class= "Smallarticle" dragablebox= "true" id= "Article6" >
<p>splendida porro oculi fugitant vitantque tueri. Sol Etiam caecat, contra si tendere pergas,propterea quia vis magnast.</p>
</div>
<div class= "Bigarticle" dragablebox= "true" id= "Article7" >
<p>splendida porro oculi fugitant vitantque tueri. Sol Etiam caecat, contra si tendere pergas,propterea quia vis magnast Ipsius et altea?ra per purum simulacra ferunturet fe Riunt Oculos Turbantia composituras.</p>
</div>
<div class= "Bigarticle" dragablebox= "true" id= "Article8" >

<p>splendida porro oculi fugitant vitantque tueri. Sol Etiam caecat, contra si tendere pergas,propterea quia vis magnast Ipsius et altea?ra per purum simulacra ferunturet fe Riunt Oculos Turbantia composituras.</p>
</div>
<div class= "Bigarticle" dragablebox= "true" id= "Article9" >
<p>splendida porro oculi fugitant vitantque tueri. Sol Etiam caecat, contra si tendere pergas,propterea quia vis magnast Ipsius et altea?ra per purum simulacra ferunturet fe Riunt Oculos Turbantia composituras.</p>
</div>
<div class= "Clear" id= "clear" ></div>
</div>
<!--end Dragable CONTENT-->
<input type= "button" value= "Save" onclick= "SaveData ()" >
</div>
<!--REQUIRED DIVs-->
<div id= "Insertionmarker" >



</div>
<!--end REQUIRED DIVs-->
<body>
</body>