この記事では、JSによるIGOOGLEDIVDRAGモジュールのドラッグレイヤードラッグ効果を実装する方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします。
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Title> JSは、IGOOGLE DIVドラッグモジュールのドラッグレイヤー効果を実装しています</title>
<style type = "text/css">
*{マージン：0px;パディング：0px;}
ボディ{位置：相対;幅：780px;高さ：800px;ボーダー：1pxソリッドレッド}
.drag {width：200px;高さ：100px;国境：1pxソリッド＃000;マージン：20px;背景：#ffff}
.Drag H1 {マージン：0px;パディング：0px;フォントサイズ：12px;高さ：18px;ラインハイト：18px;背景：＃e0e7f3;テキストインデント：20px;カーソル：移動;}
.Center {マージン：200px;ボーダー：3pxソリッドレッド}
</style>
<script type = "text/javascript"> </script>
</head>
<body>
<div>
<h1> <strong> www.baidu.com </strong> </h1>
</div>
<div>
<h1> www.163.com </h1>
</div>
<div>
<h1> <strong> www.vevb.com </strong> </h1>
</div>
<div> <h1>テスト2 </h1> </div>
<div> <h1>テスト3 </h1> </div>
<div> <h1>テスト4 </h1> </div>
<div> <h1>テスト5 </h1> </div>
</body>
</html>
<script type = "text/javascript">
/*
著者：Popper.W
バージョン：V2.0
*/
var dragzindexnumber = 0;
関数ドラッグ（obj）{
var ox、oy、ex、xy、tag = 0、mask = 0;
if（tag == 0）{
obj.onmousedown = function（e）
{
if（mask == 1）{return; }
obj.style.zindex = dragzindexnumber ++;
transp（obj、 "start"）
tag = 1;
var e = e || window.event;
ex = geteventoffset（e）.offsetx;
ey = getEventOffset（e）.offsety;
ox = parseint（obj.offsetLeft）;
oy = parseint（obj.offsettop）;
tempdiv = document.createelement（ "div"）;
with（tempdiv.style）
{
width = obj.offsetwidth+"px";
height = obj.offseTheight+"px";
border = "1px点線赤";
position = "absolute";
左= obj.offsetLeft+"px";
top = obj.offsettop+"px";
Zindex = 999;
}
document.body.AppendChild（TempDiv）;
this.ele = tempdiv;
fdragstart（tempdiv）;
document.body.onmousemove = function（e）{
if（tag == 1）
{
var e = e || window.event;
tempdiv.style.left = parseint（e.clientx）-ex+"px";
tempdiv.style.top = parseint（e.clienty）-ey+"px";
}
else {if（！tempdiv == null）tempdiv.parentnode.removechild（tempdiv）}}
}
tempdiv.onmouseup = function（e）
{
var e = e || window.event;
fdragend（tempdiv）;
obj.style.position = "absolute";
映画（OBJ、Parseint（E.ClientX）-Ex-19、Parseint（E.Clienty）-Ey-20）;
tempdiv.parentnode.RemoveChild（tempdiv）;
タグ= 0;
}
}
}
}
関数ムービー（O、L、T）{
var a = 1;
マスク= 1;
var ol = parseint（o.offsetleft）;
var ot = parseint（o.offsettop）;
var itimer = setInterval（function（）{
if（a == 10）
{
transp（o、 "end"）;
マスク= 0;
ClearInterval（itimer）;
}
o.style.left = ol+a*（l-ol）/10+"px";
o.style.top = ot+a*（t-ot）/10+"px";
a ++;
}、20）;
}
functionfcanclebubble（e）
{
var e = window.event || e;
if（e.preventdefault）e.preventdefault（）;
else e.returnvalue = false;
}
関数transp（o、mode）{
if（mode == "start"）{
if（document.all）{
o.style.filter = "alpha（ofacity = 50）";
}それ以外{
o.style.opacity = 0.5;
}
}
それ以外 {
if（document.all）{
o.style.filter = "alpha（ofacity = 100）";
}それ以外{
o.style.opacity = 1;
}
}
}
function getoffset（evt）
{
var target = evt.target;
if（target.offsetLeft == undefined）
{
ターゲット=ターゲット.ParentNode;
}
var pagecoord = getPageCoord（ターゲット）;
var eventCoord =
{
X：window.pagexoffset + evt.clientx、
Y：window.pageyoffset + evt.clienty
};
var offset =
{
offsetx：eventcoord.x -pagecoord.x、
Offsety：eventCoord.Y -PageCoord.Y
};
オフセットを返します。
}
function getPageCoord（要素）
{
var coord = {x：0、y：0};
while（element）
{
coord.x += element.offsetLeft;
coordinate.y += element.offsettop;
element = element.offsetParent;
}
戻る座標;
}
関数GetEventOffset（EVT）
{
var msg = "";
if（evt.offsetx == undefined）
{
var evtoffsets = getoffset（evt）;
msg = {offsetx：evtoffsets.offsetx、offsety：evtoffsets.offsety};
}
それ以外
{
msg = {offsetx：evt.offsetx、offsety：evt.offsety};
}
MSGを返します。
}
functionfdragstart（xele）
{
switch（fckbrs（））
{
ケース3：
window.getSelection（）。removeallranges（）;
壊す;
デフォルト：
xele.setcapture（）;
壊す;
}
}
functionfdragend（xele）
{
switch（fckbrs（））
{
ケース3：
window.getSelection（）。removeallranges（）;
壊す;
デフォルト：
xele.releasecapture（）;
壊す;
}
}
関数fckbrs（）
{
switch（navigator.appname）
{
ケース「オペラ」：2を返します。
ケース「netscape」：3を返します。
デフォルト：1を返します。
}
}
var element = document.getElementsByTagname（ "div"）;
for（var i = 0; i <lement.length; i ++）{
if（element [i] .classname == "drag"）{
ドラッグ（要素[i]）}
}
</script>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。