iGoogleDivDrag モジュールを実装する js メソッド ドラッグ レイヤー ドラッグ エフェクト_JavaScript スキル

この記事の例では、iGoogleDivDrag モジュールのドラッグ レイヤーのドラッグ効果を js で実装する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

コードをコピー コードは次のとおりです:

 

 

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])}

}

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。