ホームページ > 記事 > ウェブフロントエンド > JSで展開可能な折りたたみレイヤーのマウスドラッグ効果を実装_javascriptスキル
JSで展開可能な折りたたみレイヤーのマウスドラッグ効果を実装_javascriptスキル
- PHP中文网オリジナル
- 2016-05-16 15:37:121253ブラウズ
この記事の例では、JS を使用した展開可能な折りたたみレイヤーのマウス ドラッグ効果について説明します。皆さんの参考に共有してください。詳細は以下のとおりです。
これは簡単な JS コードで実装されたマウスドラッグレイヤーエフェクトです。参考にしてください。マウスでレイヤーのタイトル バーをクリックしてレイヤーのコンテンツを展開したり折りたたんだり、タイトル バーを押したままにしてレイヤーをドラッグします。
実行中のエフェクトのスクリーンショットは次のとおりです:
オンライン デモのアドレスは次のとおりです:
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 スキルのマウス ドラッグ効果を実現するための JS の内容です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.ん）！
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。