This article describes the JS imitation igoogle custom Home module Drag-and-drop effect method. Share to everyone for your reference. The implementation methods are as follows:
if (document.documentelement && document.documentElement.scrollTop) {
return {
X:ev.clientx + Document.documentelement.scrollleft-document.documentelement.clientleft,
Y:ev.clienty + document.documentelement.scrolltop-document.documentelement.clienttop
};
}
else if (document.body) {
return {
X:ev.clientx + Document.body.scrollleft-document.body.clientleft,
Y:ev.clienty + document.body.scrolltop-document.body.clienttop
};
}
},
Getelementpos:function (EL) {
El = This.getitself (EL);
var _x = 0, _y = 0;
do {
_x + = El.offsetleft;
_y + = El.offsettop;
while (el = el.offsetparent);
return {x: _x, y: _y};
},
Getitself:function (ID) {
Return "string" = = typeof ID? document.getElementById (ID): ID;
},
Getviewportsize: {w: (window.innerwidth)? Window.innerwidth: (Document.documentelement && document.documentElement.clientWidth)? Document.documentElement.clientWidth: (document.body?document.body.offsetwidth:0), H: (window.innerheight)? Window.innerheight: (document.documentelement && document.documentElement.clientHeight)? Document.documentElement.clientHeight: (document.body. document.body.offsetheight:0)},
IsIE:document.all? True:false,
Setouterhtml:function (obj, html) {
var objrange = Document.createrange ();
obj.innerhtml = html;
Objrange.selectnodecontents (obj);
var frag = objrange.extractcontents ();
Obj.parentNode.insertBefore (Frag, obj);
Obj.parentNode.removeChild (obj);
},
Firstchild:function (Parentobj, TagName) {
if (Common.isie) {
return parentobj.firstchild;
}
else {
var arr = parentobj.getelementsbytagname (tagName);
return arr[0];
}
},
Lastchild:function (Parentobj, TagName) {
if (Common.isie) {
return parentobj.lastchild;
}
else {
var arr = parentobj.getelementsbytagname (tagName);
return arr[arr.length-1];
}
},
Setcookie:function (name, value) {
Document.cookie = name + "=" + value;
},
Getcookie:function (name) {
var strcookie = Document.cookie;
var Arrcookie = Strcookie.split (";");
for (var i = 0; i < arrcookie.length; i++) {
var arr = arrcookie[i].split ("=");
if (!arr[1]) {
Return "";
}
if (arr[0] = = name) {
return arr[1];
}
}
Return "";
},
Delcookie:function (name) {
var exp = new Date ();
Exp.settime (Exp.gettime ()-1);
var cval = This.getcookie (name);
if (cval!= null) Document.cookie = name + "=" + Cval + "; expires=" + exp.togmtstring ();
}
}
var Class = {
Create:function () {
return function () {this.init.apply (this, arguments);}
}
}
var Drag = Class.create ();
Drag.prototype = {
Init:function (TitleBar, Dragdiv, Options) {
Set whether the tap is transparent, default transparent 60%
titlebar = Common.getitself (titlebar);
Dragdiv = Common.getitself (Dragdiv);
This.dragarea = {maxleft: -9999, maxright:9999, Maxtop: -9999, maxbottom:9999};
if (Options) {
This.opacity = options.opacity? (isNaN (parseint (options.opacity)) 100:parseint (options.opacity)): 100;
if (Options.area) {
if (Options.area.left &&!isnan (parseint (Options.area.left)) {this.dragArea.maxLeft = Options.area.left};
if (Options.area.right &&!isnan (parseint (Options.area.right)) {this.dragArea.maxRight = Options.area.right };
if (Options.area.top &&!isnan (parseint (Options.area.top)) {this.dragArea.maxTop = Options.area.top};
if (Options.area.bottom &&!isnan (parseint (Options.area.bottom)) {This.dragArea.maxBottom = Options.area.bottom};
}
}
else {
This.opacity = 60;
}
This.origindragdiv = null;
this.tmpx = 0;
This.tmpy = 0;
This.moveable = false;
This.dragarray = [];
var dragobj = this;
var dragtbl = document.getElementById ("dragtable");
Titlebar.onmousedown = function (e) {
var ev = e | | window.event | | Common.getevent ();
Only allow the left mouse button to drag and drop, ie left mouse button for 1 firefox for 0
if (Common.isie && Ev.button = 1 | |!) Common.isie && Ev.button = 0) {
}
else {
return false;
}
Handling Special cases: move at the top/bottom without touching the existing div, and back to the beginning dragged column top/Bottom
var tmpcolid;
for (c = 0; c < dragtbl.rows[0].cells.length; C + +) {
for (k = 0; k < Dragtbl.rows[0].cells[c].getelementsbytagname ("DIV"). Length; k++) {
if (dragdiv.id = = Dragtbl.rows[0].cells[c].getelementsbytagname ("DIV") [k].id) {
Tmpcolid = C;
Break
}
}
}
var tmpposfirstchild = Common.getelementpos (Common.firstchild (Dragtbl.rows[0].cells[tmpcolid), "DIV"));
var tmpposlastchild = Common.getelementpos (Common.lastchild (Dragtbl.rows[0].cells[tmpcolid), "DIV"));
var tmpobj = {colid:tmpcolid, firstchildup:tmpposfirstchild.y, Lastchilddown:tmpposlastchild.y + Common.lastChild (DRA Gtbl.rows[0].cells[tmpcolid], "DIV"). offsetheight};
Save the current location where you can drag and drop each container
Dragobj.dragarray = Dragobj.regdragspos ();
Insert Dashed box
var dashedelement = document.createelement ("div");
DashedElement.style.cssText = DragDiv.style.cssText;
DashedElement.style.border = "Dashed 2px #aaa";
DashedElement.style.marginBottom = "6px";
DashedElement.style.width = dragdiv.offsetwidth-2 * parseint (dashedElement.style.borderWidth) + "px"; Subtract boderwidth to keep the dotted box size consistent with Dragdiv
DashedElement.style.height = dragdiv.offsetheight-2 * parseint (dashedElement.style.borderWidth) + "px"; Plus PX to ensure FF correct
DashedElement.style.position = "relative";
if (dragdiv.nextsibling) {
DragDiv.parentNode.insertBefore (Dashedelement, dragdiv.nextsibling);
}
else {
DragDiv.parentNode.appendChild (dashedelement);
}
Change to absolute when dragging
DragDiv.style.width = dragdiv.offsetwidth + "px";
DragDiv.style.position = "absolute";
Dragobj.moveable = true;
DragDiv.style.zIndex = Dragobj.getzindex () + 1;
var downpos = common.getmousepos (EV);
DRAGOBJ.TMPX = Downpos.x-dragdiv.offsetleft;
Dragobj.tmpy = Downpos.y-dragdiv.offsettop;
if (Common.isie) {
Dragdiv.setcapture ();
} else {
Window.captureevents (Event.mousemove);
}
Dragobj.setopacity (Dragdiv, dragobj.opacity);
FireFox Remove drag and drop picture problem in container
if (Ev.preventdefault) {
Ev.preventdefault ();
Ev.stoppropagation ();
}
Document.onmousemove = function (e) {
if (dragobj.moveable) {
var ev = e | | window.event | | Common.getevent ();
IE Remove drag and drop picture problem in container
if (document.all)//ie
{
Ev.returnvalue = false;
}
var movepos = common.getmousepos (EV);
DragDiv.style.left = Math.max (Math.min (movepos.x-dragobj.tmpx, DragObj.dragArea.maxRight), DragObj.dragArea.maxLeft) + "px";
DragDiv.style.top = Math.max (Math.min (Movepos.y-dragobj.tmpy, DragObj.dragArea.maxBottom), DragObj.dragArea.maxTop ) + "px";
var targetdiv = null;
for (var k = 0; k < dragObj.dragArray.length; k++) {
if (Dragdiv = = Dragobj.dragarray[i]) {
Continue
}
if (Movepos.x > Dragobj.dragarray[k]. Posleft && movepos.x < dragobj.dragarray[k]. Posleft + dragobj.dragarray[k]. Poswidth
&& movepos.y > Dragobj.dragarray[k]. Postop && Movepos.y < dragobj.dragarray[k]. Postop + dragobj.dragarray[k]. Posheight
) {
Targetdiv = document.getElementById (Dragobj.dragarray[k]. Dragid);
if (Movepos.y < dragobj.dragarray[k]. Postop + dragobj.dragarray[k]. POSHEIGHT/2) {
Move up.
DashedElement.style.width = targetdiv.offsetwidth-2 * parseint (dashedElement.style.borderWidth) + "px";
TargetDiv.parentNode.insertBefore (Dashedelement, Targetdiv);
}
else {
Move Down.
DashedElement.style.width = targetdiv.offsetwidth-2 * parseint (dashedElement.style.borderWidth) + "px";
if (targetdiv.nextsibling) {
TargetDiv.parentNode.insertBefore (Dashedelement, targetdiv.nextsibling);
}
else {
TargetDiv.parentNode.appendChild (dashedelement);
}
}
}
}
for (j = 0; J < Dragtbl.rows[0].cells.length; J + +) {
var startleft = Common.getelementpos (Dragtbl.rows[0].cells[j]). x;
if (movepos.x > Startleft && movepos.x < Startleft + dragtbl.rows[0].cells[j].offsetwidth) {
Column without Div
if (Dragtbl.rows[0].cells[j].getelementsbytagname ("div"). Length = = 0) {
DashedElement.style.width = dragtbl.rows[0].cells[j].offsetwidth-2 * parseint (dashedElement.style.borderWidth) + "px" ";
Dragtbl.rows[0].cells[j].appendchild (dashedelement);
}
else {
var posfirstchild = Common.getelementpos (Common.firstchild (dragtbl.rows[0].cells[j), "DIV"));
var poslastchild = Common.getelementpos (Common.lastchild (dragtbl.rows[0].cells[j), "DIV"));
Handling Special cases: move at the top/bottom without touching the existing div, and back to the beginning dragged column top/Bottom
var tmpup, Tmpdown;
if (tmpobj.colid = = j) {
Tmpup = Tmpobj.firstchildup;
Tmpdown = Tmpobj.lastchilddown;
}
else {
Tmpup = Posfirstchild.y;
Tmpdown = Poslastchild.y + common.lastchild (dragtbl.rows[0].cells[j], "DIV"). offsetheight;
}
if (Movepos.y < Tmpup) {///Inserts a dashed box from the top
DashedElement.style.width = Common.firstchild (Dragtbl.rows[0].cells[j], "DIV"). OffsetWidth-2 * parseint ( DashedElement.style.borderWidth) + "px";
Dragtbl.rows[0].cells[j].insertbefore (Dashedelement, Common.firstchild (dragtbl.rows[0].cells[j), "DIV"));
}
else if (Movepos.y > Tmpdown) {///Inserts a dashed box from the bottom
DashedElement.style.width = Common.lastchild (Dragtbl.rows[0].cells[j], "DIV"). OffsetWidth-2 * parseint ( DashedElement.style.borderWidth) + "px";
Dragtbl.rows[0].cells[j].appendchild (dashedelement);
}
}
}
}
}
};
Document.onmouseup = function () {
if (dragobj.moveable) {
if (Common.isie) {
Dragdiv.releasecapture ();
}
else {
Window.releaseevents (Dragdiv.mousemove);
}
Dragobj.setopacity (Dragdiv, 100);
Dragobj.moveable = false;
dragobj.tmpx = 0;
Dragobj.tmpy = 0;
//Be sure to write in this if
dragDiv.style.left = "";
dragDiv.style.top = "";
dragDiv.style.width = "";
dragDiv.style.position = "";
DashedElement.parentNode.insertBefore (Dragdiv, dashedelement);
DashedElement.parentNode.removeChild (dashedelement );
}
};
}
},
setopacity:function (Dragdiv, N) {
if (Common.isie) {
dragDiv.filters.alpha.opacity = n;
}
else {
dragDiv.style.opacity = n/100;
}
},
Getzindex:function () {
var maxzindex = 0;
var divs = document.getelementsbytagname ("div");
for (z = 0; z < divs.length; z++) {
Maxzindex = Math.max (Maxzindex, Divs[z].style.zindex);
}
return maxzindex;
},
Regdragspos:function () {
var arrdragdivs = new Array ();
var dragtbl = document.getElementById ("dragtable");
var tmpdiv, Tmppos;
for (i = 0; i < dragtbl.getelementsbytagname ("div"). Length; i++) {
Tmpdiv = Dragtbl.getelementsbytagname ("div") [i];
if (Tmpdiv.classname = = "Dragdiv") {
Tmppos = Common.getelementpos (Tmpdiv);
Arrdragdivs.push ({DragId:tmpDiv.id, posleft:tmppos.x, Postop:tmppos.y, PosWidth:tmpDiv.offsetWidth, Posheight: Tmpdiv.offsetheight});
}
}
return arrdragdivs;
}
}
Window.onload = function () {
var dragtbl = document.getElementById ("dragtable");
if (Common.getcookie ("Configarr")) {
var Configarr = eval ("(" + Common.getcookie ("Configarr") + ")");
for (i = 0; i < dragtbl.rows[0].cells.length; i++) {
for (j = 0; J < Configarr[i].length; J + +) {
Dragtbl.rows[0].cells[i].appendchild (document.getElementById (configarr[i][j));
}
}
}
New Drag ("TitleBar1", "DragDiv1");
New Drag ("TitleBar2", "dragDiv2");
New Drag ("TitleBar3", "DragDiv3");
New Drag ("TITLEBAR4", "dragDiv4");
New Drag ("TitleBar5", "dragDiv5");
}
Window.onunload = function () {
var dragtbl = document.getElementById ("dragtable");
var Configarr = "";
for (i = 0; i < dragtbl.rows[0].cells.length; i++) {
var tmpstr = "";
for (j = 0; J < dragtbl.rows[0].cells[i].getelementsbytagname ("DIV"). Length; J + +) {
Tmpstr + = (Tmpstr = = "" "" ":", ") +" ' "+ dragtbl.rows[0].cells[i].getelementsbytagname (" DIV ") [J].id +"] ";
}
Configarr + = (Configarr = = "" "" ":", ") +" ["+ Tmpstr +]";
}
Format like: [[' DragDiv3 ', ' dragDiv5 '],[' dragDiv4 ', ' dragDiv1 '],[' dragDiv2 ']]
Common.setcookie ("Configarr", "[" + Configarr + "]");
}
</script>
<style type= "Text/css" >
. spandiv{
position:relative;
width:5px;
height:5px;
}
. dragdiv,.nodragdiv{
position:relative;
Filter:alpha (opacity=100);
Opacity:1;
margin-bottom:6px;
Background-color: #FFFFFF;
}
</style>
<body >
<script type= "Text/javascript" >
</script>
<table id= "dragtable" cellpadding= "3" style= "Border:solid 0px green;width:98%;" >
<tr>
<TD valign= "Top" style= "width:30%" >
<div class= "Dragdiv" id= "DragDiv1" >
<table cellpadding= "0" cellspacing= "0" border= "1" style= "WIDTH:100%;BORDER-COLLAPSE:COLLAPSE; Border-color:blue ">
<tr id= "titleBar1" style= "HEIGHT:22PX; Text-align:left; Background-color: #547BC9; color:white; Padding:3px;cursor:move; " >
<th align= "left" unselectable= "on" >Title1</th>
</tr>
<tr style= "height:130px;padding:3px" align= "left" valign= "Top" >
<TD unselectable= "On" > the characters here are longer .... I'm coming.... China.... China... Foreign., to see if there is overflow ></td>
</tr>
</table>
</div>
<div class= "Dragdiv" id= "DragDiv2" >
<table cellpadding= "0" cellspacing= "0" border= "1" style= "WIDTH:100%;BORDER-COLLAPSE:COLLAPSE; Border-color:blue ">
<tr id= "titleBar2" style= "HEIGHT:22PX; Text-align:left; Background-color: #547BC9; color:white; Padding:3px;cursor:move; " >
<th align= "left" unselectable= "on" >Title2</th>
</tr>
<tr style= "height:130px;padding:3px" align= "left" valign= "Top" >
<TD unselectable= "on" >Content2...</td>
</tr>
</table>
</div>
</td>
<TD valign= "Top" style= "width:50%" >
<div class= "Dragdiv" id= "DragDiv3" >
<table cellpadding= "0" cellspacing= "0" border= "1" style= "WIDTH:100%;BORDER-COLLAPSE:COLLAPSE; Border-color:blue ">
<tr id= "TitleBar3" style= "HEIGHT:22PX; Text-align:left; Background-color: #547BC9; color:white; Padding:3px;cursor:move; " >
<th align= "left" unselectable= "on" >Title3</th>
</tr>
<tr style= "height:230px;padding:3px" align= "left" valign= "Top" >
<TD unselectable= "on" >Content3...</td>
</tr>
</table>
</div>
</td>
<TD valign= "Top" style= "width:20%" >
<div class= "Dragdiv" id= "DragDiv4" >
<table cellpadding= "0" cellspacing= "0" border= "1" style= "WIDTH:100%;BORDER-COLLAPSE:COLLAPSE; Border-color:blue ">
<tr id= "TITLEBAR4" style= "HEIGHT:22PX; Text-align:left; Background-color: #547BC9; color:white; Padding:3px;cursor:move; " >
<th align= "left" unselectable= "on" >Title4</th>
</tr>
<tr style= "height:130px;padding:3px" align= "left" valign= "Top" >
<TD unselectable= "on" >Content4...</td>
</tr>
</table>
</div>
<div class= "Dragdiv" id= "DRAGDIV5" >
<table cellpadding= "0" cellspacing= "0" border= "1" style= "WIDTH:100%;BORDER-COLLAPSE:COLLAPSE; Border-color:blue ">
<tr id= "TitleBar5" style= "HEIGHT:22PX; Text-align:left; Background-color: #547BC9; color:white; Padding:3px;cursor:move; " >
<th align= "left" unselectable= "on" >Title5</th>
</tr>
<tr style= "height:130px;padding:3px" align= "left" valign= "Top" >
<TD unselectable= "on" >Content5...</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
<br><br>
I hope this article will help you with your JavaScript programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
