Js_javascriptスキルでドラッグして拡大できるレイヤードラッグ効果を実装する方法

この記事の例では、JSでドラッグして拡大できるレイヤードラッグエフェクトの実装方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

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

<頭>


<スタイル>
*{マージン:0;パディング:0;}
#zhezhao{
 幅:100%;
 高さ:100%;
 背景:#f00;
 フィルター:アルファ(不透明度:0);
 不透明度:0;
 z-index:9999;
 位置:絶対;
 トップ:0;
 左:0;
 表示:なし;
}
#div2{
 幅:200px;
 高さ:200px;
 位置:相対;
 背景:#EEEEEE;
 ボーダー:1px ソリッド #f00;
}
#div1{
 幅:15px;
 高さ:15px;
 背景:#99CC00;
 位置:絶対;
 右:0px;
 下:0px;
 カーソル:nw-resize;
 オーバーフロー:非表示;
 font-size:12px;
 text-align:center;
 行の高さ:15px;
 色:#FFFFFF;
 float:right;
 z-index:3;
}
#そうです{
 幅:15px;
 高さ:100%;
 背景:#f00;
 float:right;
 位置:絶対;
 右:0;
 トップ:0;
 カーソル:e-サイズ変更;
 オーバーフロー:非表示;
 フィルター:アルファ(不透明度:0);
 不透明度:0;
 z-index:1;
}
#bottom{
 幅:100%;
 高さ:15px;
 背景:#f00;
 位置:絶対;
 左:0;
 下:0;
 カーソル:n-resize;
 オーバーフロー:非表示;
 フィルター:アルファ(不透明度:0);
 不透明度:0;
 z-index:1;
}
#div2 p{
 パディング:10px;
 行の高さ:24px;
 フォントサイズ:13px;
 text-indent:24px;
 色:#996600;
}
#div2 h2{
 幅:100%;
 高さ:25px;
 行の高さ:25px;
 フォントサイズ:14px;
 背景:#CC9900;
 色:#FFFFFF;
 text-indent:15px;
 カーソル:移動;
 オーバーフロー:非表示;
}

<スクリプトタイプ="text/javascript">
window.onload=function()
{
 var oDiv=document.getElementById("div1");
 var oDiv2=document.getElementById("div2");
 var zhezhao=document.getElementById("zhezhao");
 var h2=oDiv2.getElementsByTagName("h2")[0];
 var right=document.getElementById("right");
 varbottom=document.getElementById("bottom");
 varmouseStart={};
 var divStart={};
 var rightStart={};
 varbottomStart={};
 //往右拽
 right.onmousedown=function(ev)
 {
  var oEvent=ev||イベント;
  MouseStart.x=oEvent.clientX;
  MouseStart.y=oEvent.clientY;
  rightStart.x=right.offsetLeft;
  if(right.setCapture)
  {
   right.onmousemove=doDrag1;
   right.onmouseup=stopDrag1;
   right.setCapture();
  }
  それ以外
  {
   document.addEventListener("mousemove",doDrag1,true);
   document.addEventListener("mouseup",stopDrag1,true);
  }
 };
 関数 doDrag1(ev)
 {
  var oEvent=ev||イベント;
  var l=oEvent.clientX-mouseStart.x rightStart.x;
  var w=l oDiv.offsetWidth;
 
  if(w   {
   w=oDiv.offsetWidth;
  }
  else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft)
  {
   w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;
  }
  oDiv2.style.width=w "px";
 };
 関数 stopDrag1()
 {
  if(right.releaseCapture)
  {
   right.onmousemove=null;
   right.onmouseup=null;
   right.releaseCapture();
  }
  それ以外
  {
   document.removeEventListener("mousemove",doDrag1,true);
   document.removeEventListener("mouseup",stopDrag1,true);
  }
 };
 //往下拽
 bottom.onmousedown=function(ev)
 {
  var oEvent=ev||イベント;
  MouseStart.x=oEvent.clientX;
  MouseStart.y=oEvent.clientY;
  bottomStart.y=bottom.offsetTop;
  if(bottom.setCapture)
  {
   bottom.onmousemove=doDrag2;
   bottom.onmouseup=stopDrag2;
   bottom.setCapture();
  }
  それ以外
  {
   document.addEventListener("mousemove",doDrag2,true);
   document.addEventListener("mouseup",stopDrag2,true);
  }
 };
 関数 doDrag2(ev)
 {
  var oEvent=ev||イベント;
  var t=oEvent.clientY-mouseStart.ybottomStart.y;
  var h=t oDiv.offsetHeight;
 
  if(h   {
   h=oDiv.offsetHeight;
  }
  else if(h>document.documentElement.clientHeight-oDiv2.offsetTop)
  {
   h=document.documentElement.clientHeight-oDiv2.offsetTop-2;
  }
 
  oDiv2.style.height=h "px";
 };
 関数 stopDrag2()
 {
  if(bottom.releaseCapture)
  {
   bottom.onmousemove=null;
   bottom.onmouseup=null;
   bottom.releaseCapture();
  }
  それ以外
  {
   document.removeEventListener("mousemove",doDrag2,true);
   document.removeEventListener("mouseup",stopDrag2,true);
  }
 };
 //左右同時拽
 oDiv.onmousedown=function(ev)
 {
  var oEvent=ev||イベント;
  MouseStart.x=oEvent.clientX;
  MouseStart.y=oEvent.clientY;
  divStart.x=oDiv.offsetLeft;
  divStart.y=oDiv.offsetTop;
  if(oDiv.setCapture)
  {
   oDiv.onmousemove=doDrag;
   oDiv.onmouseup=stopDrag;
   oDiv.setCapture();
  }
  それ以外
  {
   document.addEventListener("mousemove",doDrag,true);
   document.addEventListener("mouseup",stopDrag,true);
  }
  zhezhao.style.display='ブロック';
 };
 関数 doDrag(ev)
 {
  var oEvent=ev||イベント;
  var l=oEvent.clientX-mouseStart.x divStart.x;
  var t=oEvent.clientY-mouseStart.y divStart.y;
 
 
  var w=l oDiv.offsetWidth;
  var h=t oDiv.offsetHeight;
 
  if(w   {
   w=oDiv.offsetWidth;
  }
  else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft)
  {
   w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;
  }
  if(h   {
   h=oDiv.offsetHeight;
  }
  else if(h>document.documentElement.clientHeight-oDiv2.offsetTop)
  {
   h=document.documentElement.clientHeight-oDiv2.offsetTop-2;
  }
 
  oDiv2.style.width=w "px";
  oDiv2.style.height=h "px";
 };
 関数 stopDrag()
 {
  if(oDiv.releaseCapture)
  {
   oDiv.onmousemove=null;
   oDiv.onmouseup=null;
   oDiv.releaseCapture();
  }
  それ以外
  {
   document.removeEventListener("mousemove",doDrag,true);
   document.removeEventListener("mouseup",stopDrag,true);
  }
  zhezhao.style.display='none';
 };
 
 //h2完美拖拽
 h2.onmousedown=function(ev)
 {
  var oEvent=ev||イベント;
  MouseStart.x=oEvent.clientX;
  MouseStart.y=oEvent.clientY;
  divStart.x=oDiv2.offsetLeft;
  divStart.y=oDiv2.offsetTop;
 
  if(h2.setCapture)
  {
   h2.onmousemove=doDrag3;
   h2.onmouseup=stopDrag3;
   h2.setCapture();
  }
  それ以外
  {
   document.addEventListener("mousemove",doDrag3,true);
   document.addEventListener("mouseup",stopDrag3,true);
  }
 
  zhezhao.style.display='ブロック';
 };
 関数 doDrag3(ev)
 {
  var oEvent=ev||イベント;
  var l=oEvent.clientX-mouseStart.x divStart.x;
  var t=oEvent.clientY-mouseStart.y divStart.y;
  if(l<0)
  {
   l=0;
  }
  else if(l>document.documentElement.clientWidth-oDiv2.offsetWidth)
  {
   l=document.documentElement.clientWidth-oDiv2.offsetWidth;
  }
  if(t<0)
  {
   t=0;
  }
else if(t>document.documentElement.clientHeight-oDiv2.offsetHeight)
{
t=document.documentElement.clientHeight-oDiv2.offsetHeight;
}
oDiv2.style.left=l "px";
oDiv2.style.top=t "px";
};
関数 stopDrag3()
{
if(h2.releaseCapture)
{
h2.onmousemove=null;
h2.onmouseup=null;
h2.releaseCapture();
}
それ以外
{
document.removeEventListener("mousemove",doDrag3,true);
document.removeEventListener("mouseup",stopDrag3,true);
}

zhezhao.style.display='none';
}
};

パーフェクトドラッグ

JavaScript Web ページのドラッグを体験してください。ドラッグするだけでなく、ドラッグして拡大することもできます。Windows ウィンドウのように、レイヤーの右下隅を押し続けるだけで拡大または縮小できます。自由に外へ。それを使用したい友人は、コード内の J をクラスにカプセル化することができます。外部から導入する方が合理的です。 '

ドラッグ

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