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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

May 16, 2016 pm 04:11 PM

js 方法モジュール

この記事の例では、iGoogleDivDrag モジュールのドラッグレイヤーのドラッグ効果を 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 Div Drag 模块拖动 层拖动效果</title>

<style type="text/css">

*{margin:0px; padding:0px;}

 body{position:relative; width:780px; height:800px; border:1px solid red}

.drag{width:200px; height:100px; border:1px solid #000;margin:20px; background:#fff}

.drag h1{margin:0px; padding:0px; font-size:12px; height:18px; line-height:18px; background:#E0E7F3; text-indent:20px;cursor:move;}

.center{ margin:200px; border:3px solid red}

</style>

<script type="text/javascript"></script>

</head>

<body>

 <div class="drag" >

 <h1><strong>www.baidu.com</strong></h1>

 </div>

 <div class="drag" >

 <h1>www.163.com</h1>

 </div>

 <div class="drag" >

 <h1><strong>www.jb51.net</strong></h1>

 </div>

 <div class="drag"><h1>测试二</h1></div>

 <div class="drag"><h1>测试三</h1></div>

 <div class="drag"><h1>测试四</h1></div>

 <div class="drag"><h1>测试五</h1></div>

</body>

</html>

<スクリプトタイプ="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])}

}

</script>