JS實現(xiàn)可展開折疊層的鼠標拖曳效果
更新時間：2015年10月09日 10:01:31 作者：企鵝
這篇文章主要介紹了JS實現(xiàn)可展開折疊層的鼠標拖曳效果,具有展開折疊層及實時顯示鼠標坐標位置的功能,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)可展開折疊層的鼠標拖曳效果。分享給大家供大家參考。具體如下：
這是一款簡單JS代碼實現(xiàn)的鼠標拖曳圖層效果，比較精簡，大家參考一下。鼠標點擊層標題欄可實現(xiàn)層內(nèi)容的展開與折疊，按住標題欄可實現(xiàn)層的拖動。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-fade-out-mouse-draw-style-demo/
具體代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>鼠標拖曳</title>
</head>
<body>
<script type="text/javascript">
function drag(elementToDrag,event){
var startX=event.clientX,startY=event.clientY;
var origX=elementToDrag.offsetLeft,origY=elementToDrag.offsetTop;
var deltaX=startX-origX,deltaY=startY-origY;
if(document.addEventListener){
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
}
else{
elementToDrag.setCapture();
elementToDrag.attachEvent("onmousemove",moveHandler);
elementToDrag.attachEvent("onmouseup",upHandler);
elementToDrag.attachEvent("onlosecapture",upHandler);
}
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
if(event.preventDefault) event.preventDefault();
else event.returnValue=false;
function moveHandler(e){
if(!e) e=window.event;
elementToDrag.style.left=(e.clientX-deltaX)+"px";
elementToDrag.style.top=(e.clientY-deltaY)+"px";
elementToDrag.style.zIndex="10";
elementToDrag.getElementsByTagName("p")[0].innerHTML="clientX:"+e.clientX+"</br>"+"clientY:"+e.clientY+"</br>"+"offsetLeft:"+origX+"</br>"+"offsetTop:"+origY+"</br>"+"clientX-offsetLeft:"+deltaX+"</br>"+"clientY-offsetTop:"+deltaY+"</br>";
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
}
function upHandler(e){
if(!e) e=window.event;
elementToDrag.style.zIndex="1";
if(document.removeEventListener){
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);
}
else{
elementToDrag.detachEvent("onlosecapture",upHandler);
elementToDrag.detachEvent("onmouseup",upHandler);
elementToDrag.detachEvent("onmousemove",moveHandler);
elementToDrag.releaseCapture();
}
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;
}
}
</script>
<div style="position:absolute;left:100px;top:100px;width:250px;background-color:#789;border:1px solid #f00">
<div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" onmousedown="drag(this.parentNode,event)">Drag Me1</div>
<p>test</p>
</div>
<div style="position:absolute;left:100px;top:200px;width:250px;background-color:#789;border:1px solid #f00">
<div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" onmousedown="drag(this.parentNode,event)">Drag Me2</div>
<p>test</p>
</div>
<div style="position:absolute;left:100px;top:300px;width:250px;background-color:#789;border:1px solid #f00">
<div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" onmousedown="drag(this.parentNode,event)">Drag Me3</div>
<p>test</p>
</div>
</body>
</html>
希望本文所述對大家的JavaScript程序設計有所幫助。
相關文章
使用p5.js實現(xiàn)動態(tài)GIF圖片臨摹重現(xiàn)
這篇文章主要為大家詳細介紹了使用p5.js實現(xiàn)動態(tài)GIF圖片臨摹重現(xiàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
解決LayUI加上form.render()下拉框和單選以及復選框不出來的問題
今天小編就為大家分享一篇解決LayUI加上form.render()下拉框和單選以及復選框不出來的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript+Canvas實現(xiàn)酷炫的粒子和流星效果
這篇文章主要為大家詳細介紹了如何利用JavaScript和Canvas實現(xiàn)酷炫的粒子和流星動畫效果，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下2023-01-01
javascript的alert box在java中如何顯示多行
這篇文章主要介紹了javascript的alert box在java中如何顯示多行,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了JS正則表達式學習之貪婪和非貪婪模式用法,結(jié)合實例形式總結(jié)分析了JS正則表達式中貪婪模式與非貪婪模式的具體功能、使用方法與相關注意事項,需要的朋友可以參考下2016-12-12
編程語言中，函數(shù)Func(Type a,……)直接或間接調(diào)用函數(shù)本身，則該函數(shù)稱為遞歸函數(shù)。遞歸函數(shù)不能定義為內(nèi)聯(lián)函數(shù)。這篇文章主要介紹了JS中遞歸函數(shù)的相關資料,需要的朋友可以參考下2016-06-06
基于Bootstrap使用jQuery實現(xiàn)輸入框組input-group的添加與刪除
這篇文章主要介紹了基于Bootstrap使用jQuery實現(xiàn)輸入框組input-group的添加與刪除的相關資料,需要的朋友可以參考下2016-05-05
這篇文章介紹了JavaScript調(diào)用后臺的三種方法實例，有需要的朋友可以參考一下2013-10-10
在Javascript里，函數(shù)被調(diào)用的時候，除了接受聲明是定義的形式參數(shù)，每一個函數(shù)還接受兩個附加的參數(shù)：this和arguments。2011-09-09
我們平時對 cookie 的增刪改查等操作，都是在操作document.cookie，這里我們介紹一個新方法cookieStore。2021-05-05