ドラッグ可能なレイヤ
1667 ワード
:
<style type="text/css">
#postit{
position:absolute;
width:250;
padding:5px;
background-color:#FFFFFF;
border:1px solid red;
z-index:100;
cursor:hand;
color: red;
}
</style>
<script type="text/javascript">
function closeit(){
document.getElementById("postit").style.display="none";
}
//
var currentMoveObj = null; //
var relLeft; //
var relTop;
function f_mdown(obj)
{
currentMoveObj = obj; // ,
currentMoveObj.style.position = "absolute";
relLeft = event.x - currentMoveObj.style.pixelLeft;
relTop = event.y - currentMoveObj.style.pixelTop;
}
window.document.onmouseup = function()
{
currentMoveObj = null; //
}
function f_move(obj)
{
if(currentMoveObj != null)
{
currentMoveObj.style.pixelLeft=event.x-relLeft;
currentMoveObj.style.pixelTop=event.y-relTop;
}
}
</script>
jspページ:
<div id="postit" style="left:45%;top:2%" onmousedown="f_mdown(this)" onmousemove="f_move(this)">
<div align="right"><b><a href="javascript:closeit()">[ ]</a></b></div>
hello,welcome to china!
</div>
コードを実行すると、レイヤをドラッグしてページを移動できます!