<?xml version="1.0" encoding="UTF-8" ?>
<jsp:root
	xmlns:jsp="http://java.sun.com/JSP/Page"
	xmlns:og="hybs-taglib.tld"
	version="2.0">
<jsp:directive.page language="java" contentType="text/html; charset=UTF-8" />
<og:head headType="result">
	<!-- 8.4.1.1 (2023/02/24) headタグ内に移動 -->
	<style>
		div.imgcls {
			background-image: url( honsha.png );
			width  : 100% ;
			height : 100% ;
		}

		#boxID {
			position: absolute;
			background: #fff;
			z-index: 10;
		}
	</style>
</og:head>

<body>
<div class="imgcls">
	<div id="boxID">
		<h2>ここは見出しだけど持つところになる</h2>
		あとこの辺はコンテンツ。
	</div>
</div>

	<script>
		var boxID   = "#boxID";
		var clickID = "#boxID > h2";
		$(clickID).mousedown(function(e){
			$(boxID)
				.data("clickPointX" , e.pageX - $(boxID).offset().left)
				.data("clickPointY" , e.pageY - $(boxID).offset().top);
			$(document).mousemove(function(e){
				$(boxID).css({
					top:e.pageY  - $(boxID).data("clickPointY") +"px",
					left:e.pageX - $(boxID).data("clickPointX") +"px"
				})
			})
		}).mouseup(function(){
			$(document).unbind("mousemove")
		});
	</script>

</body>

<jsp:directive.include file="/jsp/common/htmlend.jsp" />
</jsp:root>
