cari

Rumah >hujung hadapan web >tutorial js >JS melaksanakan kemahiran seret dan lepaskan efek_javascript lapisan Div halaman web

JS melaksanakan kemahiran seret dan lepaskan efek_javascript lapisan Div halaman web

WBOY
WBOYasal
2016-05-16 15:37:591264semak imbas

Contoh dalam artikel ini menerangkan pelaksanaan JS bagi kesan seret dan lepas Klon pada lapisan Div halaman web. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah seretan lapisan, contoh kesan seret-dan-klon pada halaman web Kedua-dua lapisan boleh dialihkan sewenang-wenangnya dengan menyeret tetikus tahap tertinggi atau tidak Lapisan tidak akan disekat oleh lapisan lain.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-draw-box-clone-style-codes/

<!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>拖拽--Clone</title>
<style type="text/css"> 
body,div{margin:0;padding:0;}
body{background:#3e3e3e;}
div{position:absolute;width:100px;height:100px;cursor:move;border:1px solid #888;background:#000;}
#drag1{top:100px;left:100px;}
#drag2{top:100px;left:300px;}
#temp{opacity:0.3;filter:alpha(opacity=30);}
</style>
<script type="text/javascript"> 
var zIndex = 1;
window.onload = function ()
{
 var oDrag1 = document.getElementById("drag1");
 var oDrag2 = document.getElementById("drag2");
 drag(oDrag1);
 drag(oDrag2);
};
function drag(oDrag)
{
 var disX = dixY = 0;
 oDrag.onmousedown = function (event)
 {
  var event = event || window.event;
  disX = event.clientX - this.offsetLeft;
  disY = event.clientY - this.offsetTop;  
  var oTemp = document.createElement("div");
  oTemp["id"] = "temp";
  oTemp.style.left = this.currentStyle &#63; this.currentStyle["left"] : getComputedStyle(this, null)["left"];
  oTemp.style.top = this.currentStyle &#63; this.currentStyle["top"] : getComputedStyle(this, null)["top"];
  oTemp.style.zIndex = zIndex++;
  document.body.appendChild(oTemp);
  document.onmousemove = function (event)
  {
   var event = event || window.event;
   var iL = event.clientX - disX;
   var iT = event.clientY - disY;
   var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;
   var maxT = document.documentElement.clientHeight - oDrag.offsetHeight
   iL <= 0 && (iL = 0);
   iT <= 0 && (iT = 0);
   iL >= maxL && (iL = maxL);
   iT >= maxT && (iT = maxT);
   oTemp.style.left = iL + "px";
   oTemp.style.top = iT + "px";
   return false;
  };
  document.onmouseup = function ()
  {
   document.onmousemove = null;
   document.onmouseup = null;
   oDrag.style.left = oTemp.style.left;
   oDrag.style.top = oTemp.style.top;
   oDrag.style.zIndex = oTemp.style.zIndex;
   document.body.removeChild(oTemp);
   oDrag.releaseCapture && oDrag.releaseCapture()
  };
  this.setCapture && this.setCapture();  
  return false
 } 
}
</script>
</head>
<body>
<div id="drag1"></div>
<div id="drag2"></div>
</body>
</html>

Saya harap artikel ini akan membantu pengaturcaraan JavaScript semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Perbincangan ringkas tentang objek Objek dan Fungsi dalam kemahiran Javascript_javascriptArtikel seterusnya：Perbincangan ringkas tentang objek Objek dan Fungsi dalam kemahiran Javascript_javascript

Artikel berkaitan

Lihat lagi