JS實作網頁Div層Clone拖曳效果_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

JS實作網頁Div層Clone拖曳效果_javascript技巧

May 16, 2016 pm 03:37 PM

clone js 拖曳

本文實例講述了JS實現網頁Div層Clone拖曳效果。分享給大家供大家參考。具體如下：

這是一個層拖曳，網頁上的拖曳Clone效果實例，兩個層可在滑鼠的拖曳下，任意改變位置，智能判斷層級，也就是智能判斷自身是否處於最高層，最高處的層是不會被其它層遮擋的。

運作效果截圖如下：

線上示範網址如下：

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

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;拖拽--Clone&lt;/title&gt;
&lt;style type="text/css"&gt; 
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);}
&lt;/style&gt;
&lt;script type="text/javascript"&gt; 
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 &lt;= 0 && (iL = 0);
   iT &lt;= 0 && (iT = 0);
   iL &gt;= maxL && (iL = maxL);
   iT &gt;= 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
 } 
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="drag1"&gt;&lt;/div&gt;
&lt;div id="drag2"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

登入後複製

希望本文所述對大家的JavaScript程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn