この記事では、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プログラミングに役立つことを願っています。