欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實(shí)現(xiàn)網(wǎng)頁Div層Clone拖拽效果

 更新時(shí)間：2015年09月26日 09:58:49   作者：企鵝  
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁Div層Clone拖拽效果,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)改變頁面元素位置屬性及層級屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)網(wǎng)頁Div層Clone拖拽效果。分享給大家供大家參考。具體如下：

這是一個(gè)層拖動(dòng)，網(wǎng)頁上的拖拽Clone效果實(shí)例，兩個(gè)層可在鼠標(biāo)的拖動(dòng)下，任意改變位置，智能判斷層級，也就是智能判斷自身是否處于最高層，最高處的層是不會(huì)被其它層遮擋的。

運(yùn)行效果截圖如下：

在線演示地址如下：

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 ? this.currentStyle["left"] : getComputedStyle(this, null)["left"];
  oTemp.style.top = this.currentStyle ? 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>

希望本文所述對大家的JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • javascript中Date對象的getDay方法使用指南

    javascript中Date對象的getDay方法使用指南

    這篇文章主要介紹了javascript中Date對象的getDay方法使用以及各種優(yōu)化方案，非常不錯(cuò)的文章，這里推薦給大家。
    2014-12-12
  • JS字符串函數(shù)擴(kuò)展代碼

    JS字符串函數(shù)擴(kuò)展代碼

    JS字符串函數(shù)擴(kuò)展代碼，大家可以參考下prototype的使用方法，擴(kuò)展自己的字符串處理函數(shù)。
    2011-09-09
  • javascirpt實(shí)現(xiàn)2個(gè)iframe之間傳值的方法

    javascirpt實(shí)現(xiàn)2個(gè)iframe之間傳值的方法

    這篇文章主要介紹了javascirpt實(shí)現(xiàn)2個(gè)iframe之間傳值的方法,涉及javascript針對iframe框架下的頁面元素操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2016-06-06
  • JS繪圖Flot如何實(shí)現(xiàn)動(dòng)態(tài)可刷新曲線圖

    JS繪圖Flot如何實(shí)現(xiàn)動(dòng)態(tài)可刷新曲線圖

    這篇文章主要介紹了JS繪圖Flot如何實(shí)現(xiàn)動(dòng)態(tài)可刷新曲線圖,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-10-10
  • layui的layedit富文本賦值方法

    layui的layedit富文本賦值方法

    今天小編就為大家分享一篇layui的layedit富文本賦值方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • JS數(shù)據(jù)類型分類及常用判斷方法

    JS數(shù)據(jù)類型分類及常用判斷方法

    這篇文章主要介紹了JS數(shù)據(jù)類型分類及常用判斷方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-11-11
  • JS 事件綁定函數(shù)代碼

    JS 事件綁定函數(shù)代碼

    JS 事件綁定函數(shù)代碼，解決了瀏覽器兼容，現(xiàn)在可以兼容IE6 7 8 FF 谷歌
    2010-04-04
  • input輸入框鼠標(biāo)焦點(diǎn)提示信息

    input輸入框鼠標(biāo)焦點(diǎn)提示信息

    本文給大家分享的是一則非常常用和實(shí)用的小技巧，當(dāng)鼠標(biāo)點(diǎn)擊到輸入框（input）里的時(shí)候，輸入框的提示消失，鼠標(biāo)再移開，輸入框提示出現(xiàn)，推薦給小伙伴們
    2015-03-03
  • 深入理解JavaScript中的宏任務(wù)和微任務(wù)機(jī)制

    深入理解JavaScript中的宏任務(wù)和微任務(wù)機(jī)制

    JavaScript中的任務(wù)分為宏任務(wù)和微任務(wù)，它們的執(zhí)行順序會(huì)影響代碼的執(zhí)行結(jié)果。了解它們的機(jī)制可以幫助我們更好地理解事件循環(huán)和異步編程，避免出現(xiàn)一些意想不到的錯(cuò)誤
    2023-05-05
  • 用Javascript實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼間隔功能

    用Javascript實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼間隔功能

    這篇文章主要介紹了用Javascript實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼間隔功能,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2021-02-02

最新評論