この記事の例では、iGoogleDivDrag モジュールのドラッグ レイヤーのドラッグ効果を js で実装する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。
js实现iGoogle Div Drag 模块拖动 层拖动效果
www.baidu.com
www.163.com
www.jb51.net
测试二
测试三
测试四
测试五
<スクリプトタイプ="text/javascript">
/*
著者 : Popper.w
バージョン : v2.0
*/
var DragZindexNumber=0;
関数ドラッグ(obj){
var ox,oy,ex,xy,tag=0,mask=0;
if(tag==0){
obj.onmousedown=関数(e)
{
if(マスク==1){戻り値; }
obj.style.zIndex=DragZindexNumber ;
transp(obj,"開始")
タグ=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";
高さ=obj.offsetHeight "px";
border="1px 点線の赤";
位置="絶対";
left=obj.offsetLeft "px";
top=obj.offsetTop "px";
zIndex=999;
}
document.body.appendChild(tempDiv);
this.ele=tempDiv;
fDragStart(tempDiv);
document.body.onmousemove=function(e){
if(タグ==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=関数(e)
{
var e=e||window.event;
fDragEnd(tempDiv);
obj.style.position="絶対";
movie(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";
;
},20);
}
関数 fCancleBubble(e)
{
var e = window.event || e;
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
関数 transp(o,mode){
if(mode=="開始"){
if(document.all){
o.style.filter = "アルファ(不透明度=50)";
}その他{
o.style.opacity = 0.5;
}
}
他 {
if(document.all){
o.style.filter = "アルファ(不透明度=100)";
}その他{
o.style.opacity = 1;
}
}
}
関数 getOffset(evt)
{
var target = evt.target;
if (target.offsetLeft == 未定義)
{
target = target.parentNode;
}
var pageCoord = getPageCoord(target);
vareventCoord =
{
x: window.pageXOffset evt.clientX,
y: window.pageYOffset evt.clientY
};
var オフセット =
{
offsetX:eventCoord.x - pageCoord.x,
offsetY:eventCoord.y - pageCoord.y
};
オフセットを返します;
}
function getPageCoord(element)
{
var coord = {x: 0, y: 0};
while (要素)
{
coord.x = element.offsetLeft;
coord.y = element.offsetTop;
要素 = element.offsetParent;
}
座標を返します;
}
関数 getEventOffset(evt)
{
var msg = "";
if (evt.offsetX == 未定義)
{
var evtOffsets = getOffset(evt);
msg={offsetX:evtOffsets.offsetX,offsetY:evtOffsets.offsetY};
}
それ以外
{
msg={オフセットX:evt.offsetX,offsetY:evt.offsetY};
}
メッセージを返す;
}
関数 fDragStart(XEle)
{
スイッチ(fCkBrs())
{
ケース 3:
window.getSelection().removeAllRanges();
休憩;
デフォルト:
XEle.setCapture();
休憩;
}
}
関数 fDragEnd(XEle)
{
スイッチ(fCkBrs())
{
ケース 3:
window.getSelection().removeAllRanges();
休憩;
デフォルト:
XEle.releaseCapture();
休憩;
}
}
関数 fCkBrs()
{
スイッチ (navigator.appName)
{
case 'Opera': return 2;
'Netscape' の場合: 3 を返します;
デフォルト: 1 を返します;
}
}
var element=document.getElementsByTagName("div");
for(var i=0;i
if(element[i].className=="ドラッグ"){
ドラッグ(要素[i])}
}