ドラッグ可能なレイヤ

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>

コードを実行すると、レイヤをドラッグしてページを移動できます!