この記事では、JSがIgoogleカスタムホームページモジュールを模倣するJSの特殊効果をドラッグおよびドロップする方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
コードコピーは次のとおりです。
<！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">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> jsはigoogleカスタムホームページモジュールのドラッグアンドドロップ効果</タイトル>を模倣します
<script type = "text/javascript">
var common = {
GetEvent：function（）{// ie/ff
if（document.all）{
window.eventを返します。
}
func = getevent.caller;
while（func！= null）{
var arg0 = func.arguments [0];
if（arg0）{
if（（arg0.constructor == event || arg0.constructor == mousevent）||（typeof（arg0）== "object" && arg0.preventdefault && arg0.stoppropagation）{
arg0を返します。
}
}
func = func.caller;
}
nullを返します。
}、
getMousePos：function（ev）{
if（！ev）{
ev = this.getevent（）;
}
if（ev.pagex || ev.pagey）{
戻る {
X：ev.pagex、
Y：ev.pagey
};
}
if（document.documentelement && document.documentelement.scrolltop）{
戻る {
X：ev.clientx + document.documentlement.scrollleft -document.documentelement.clientleft、
y：ev.clienty + document.documentlement.scrolltop -document.documentelement.clienttop
};
}
else if（document.body）{
戻る {
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;
する {
_x += el.offsetLeft;
_y += el.offsettop;
} while（el = el.offsetparent）;
{x：_x、y：_y}を返します。
}、
GetItSelf：function（id）{
"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.offsetheigh：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）{
durten parentobj.firstchild;
}
それ以外 {
var arr = parentobj.getelementsbytagname（tagname）;
arr [0]を返します。
}
}、
lastChild：function（parentobj、tagname）{
if（common.isie）{
deturn datreabj.lastchild;
}
それ以外 {
var arr = parentobj.getelementsbytagname（tagname）;
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]）{
戻る "";
}
if（arr [0] == name）{
arr [1]を返します。
}
}
戻る "";
}、
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）{
//クリックが透明であるかどうかを設定し、デフォルトは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（option.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};
}
}
それ以外 {
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（）;
//左マウスボタンをドラッグアンドドロップするだけ、つまり左マウスボタンは1です。
if（common.isie && ev.button == 1 ||！common.isie && ev.button == 0）{
}
それ以外 {
falseを返します。
}
//特別なケースの処理：上/下の動きに遭遇しない場合、初期ドラッグの上/下列に戻ります。
var tmpcolid;
for（c = 0; c <dragtbl.rows [0] .cells.length; c ++）{
for（k = 0; k <dragtbl.rows [0] .cells [c] .getelementsbytagname（ "div"）。長さ; k ++）{
if（dragdiv.id == dragtbl.rows [0] .cells [c] .getelementsbytagname（ "div"）[k] .id）{
tmpcolid = c;
壊す;
}
}
}
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（dragtbl.rows [0] .cells [tmpcolid]、 "div"）。
//各容器をドラッグしてドロップできる現在の場所を保存します
dragobj.dragarray = dragobj.regdragspos（）;
//点線のボックスを挿入します
var dashedelement = document.createelement（ "div"）;
dashedelement.style.csstext = dragdiv.style.csstext;
dashedelement.style.border = "ダッシュ2px #aaa";
dashedelement.style.marginbottom = "6px";
dashedelement.style.width = dragdiv.offsetwidth -2 * parseint（dashedelement.style.borderwidth） + "px"; //胴体を減算して、点線のボックスサイズをdragdivと一致させます
dashedelement.style.height = dragdiv.offseetheight -2 * parseint（dashedelement.style.borderwidth） + "px"; // PXを追加して、FFが正しいことを確認します
dashedelement.style.position = "relative";
if（dragdiv.nextsibling）{
dragdiv.parentnode.insertbefore（dashedelement、dragdiv.nextsibling）;
}
それ以外 {
dragdiv.parentnode.appendchild（dashedelement）;
}
//ドラッグすると絶対になります
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（）;
} それ以外 {
window.captureevents（event.mousemove）;
}
dragobj.setopacity（dragdiv、dragobj.opacity）;
// firefoxは、コンテナに写真をドラッグしてドロップする問題を削除します
if（ev.preventdefault）{
ev.preventdefault（）;
ev.StopPropagation（）;
}
document.onmousemove = function（e）{
if（dragobj.moveable）{
var ev = e || window.event || common.getEvent（）;
// IEは、コンテナに写真をドラッグしてドロップする問題を削除します
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]）{
続く;
}
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
）{
ターゲットdiv = document.getElementById（dragobj.dragarray [k] .dragid）;
if（movepos.y <dragobj.dragarray [k] .postop + dragobj.dragarray [k] .posheight / 2）{
//上に移動します
dashedelement.style.width = targetdiv.offsetwidth -2 * parseint（dashedelement.style.borderwidth） + "px";
TargetDiv.ParentNode.InsertBefore（DashedElement、TargetDiv）;
}
それ以外 {
//下に移動します
dashedelement.style.width = targetdiv.offsetwidth -2 * parseint（dashedelement.style.borderwidth） + "px";
if（targetdiv.nextsibling）{
TargetDiv.ParentNode.InsertBefore（DashedElement、TargetDiv.NextSibling）;
}
それ以外 {
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）{
///列には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）;
}
それ以外 {
var posfirstchild = common.getElementPos（common.firstchild（dragtbl.rows [0] .cells [j]、 "div"））;
var poslastchild = common.getElementPos（common.lastchild（dragtbl.rows [0] .cells [j]、 "div"））;
//特別なケースの処理：上/下の動きに遭遇しない場合、初期ドラッグの上/下列に戻ります。
var tmpup、tmpdown;
if（tmpobj.colid == j）{
tmpup = tmpobj.firstchildup;
tmpdown = tmpobj.lastchilddown;
}
それ以外 {
tmpup = posfirstchild.y;
tmpdown = poslastchild.y + common.lastchild（dragtbl.rows [0] .cells [j]、 "div"）。
}
if（movepos.y <tmpup）{///上部から点線のボックスを挿入します
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）{///下部から点線のボックスを挿入します
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（）;
}
それ以外 {
window.releasevents（dragdiv.mousemove）;
}
dragobj.setopacity（dragdiv、100）;
dragobj.moveable = false;
dragobj.tmpx = 0;
dragobj.tmpy = 0;
//この場合は必ず書いてください
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;
}
それ以外 {
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）;
}
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}）;
}
}
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"）。長さ; 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 {
位置：相対;
幅：5px;
高さ：5px;
}
.dragdiv、.nodragdiv {
位置：相対;
フィルター：アルファ（不透明度= 100）;
不透明：1;
マージンボトム：6px;
バックグラウンドカラー：#fffff;
}
</style>
</head>
<body>
<script type = "text/javascript">
</script>
<表ID = "DragTable" CellPadding = "3" style = "border：solid 0px green; width：98％;">
<tr>
<td valign = "top">
<div id = "dragdiv1">
<table cellpadding = "0" cellpacing = "0">
<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">ここのキャラクターは比較的長いです...私はここにいます...中国...中国...外国。
</tr>
</table>
</div>
<div id = "dragdiv2">
<table cellpadding = "0" cellpacing = "0">
<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">
<div id = "dragdiv3">
<table cellpadding = "0" cellpacing = "0">
<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">
<div id = "dragdiv4">
<table cellpadding = "0" cellpacing = "0">
<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 id = "dragdiv5">
<table cellpadding = "0" cellpacing = "0">
<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> <hr>インターネット上で収集された、商業目的ではなく、関心と学習の交換のためだけに収集されます。 </font> </p>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。