<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style>
a{
filter:alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
}
a:hover{
filter:alpha(opacity=90);
-moz-opacity: 0.9;
-khtml-opacity: 0.9;
}
.jqHandle {
background-image: url("images/ui-icons_222222_256x240.png");
background-position: -64px -224px;
height: 16px;
width: 16px;
}
.jqDrag {
width: 100%;cursor: move;
}
.jqResize {
width: 15px;
position: absolute;
bottom: 0;
right: 0;
cursor: se-resize;
}
.jqDnR {
position: absolute;
cursor:move;
width: 100px;
height: 200px;
font-size: 0.77em;
color: #618d5e;
background-color: #EEE;
overflow:hidden;
}
.toolArea{
width: 200px;
height: 700px;
border: 1px solid;
float:left;
}
.operationArea{
border: 1px solid;
position:absolute;
width: 600px;
height: 700px;
left: 250px;
float:left;
}
.toolBox{
width: 50px;
height: 50px;
border: solid 1px;
margin: 5px;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jqDnR.js"></script>
<script type="text/javascript" src="js/dimensions.js"></script>
<script type="text/javascript">
$(function() {
$('#ex1').jqResize('.jqResize').jqDrag();
$('#ex2').jqResize('.jqResize').jqDrag();
});
$(function(){
$("#code h1").click(function(){
$("p").toggle();
});
});
function getXY(){
var X = $('#ex1').position().left;
var Y = $('#ex1').position().top;
//alert(X);
//alert(Y);
}
// 点击Tool面板中的Icon
function toolIconClicked(toolIcon){
// 改变按钮的状态：按下，凸起
//tooIcon.css("background","red");
if(toolIcon.id=="movie"){
$("#operationArea").bind("mouseup",function(event){
alert(event.pageX - $("#operationArea").offset().left);
alert(event.pageY - $("#operationArea").offset().top);
});
}
}
$(document).ready(function(){
$("#operationArea").bind("mousedown",function(event){
alert(event.pageX - $("#operationArea").offset().left);
alert(event.pageY - $("#operationArea").offset().top);
});
$("#operationArea").bind("mouseup",function(event){
alert(event.pageX - $("#operationArea").offset().left);
alert(event.pageY - $("#operationArea").offset().top);
});
$("#ex1").bind("mousedown",function(event){
$("#operationArea").unbind("mouseup");
});
$("#ex2").bind("mousedown",function(event){
$("#operationArea").unbind("mouseup");
});
});
</script>
</head>
<body>
<div id="toolArea" class="toolArea">
tools area<br>
tools area<br>
tools area<br>
tools area<br>
<div id="movie" class="toolBox" onclick="javascript:toolIconClicked(this)">Movie</div>
<div id="image" class="toolBox">Image</div>
<div id="audio" class="toolBox">Audio</div>
<div id="text" class="toolBox">Text</div>
</div>
<div id="operationArea" class="operationArea">
<div id="ex1" class="jqDnR" onclick="getXY()" style="z-index: 2">
test1!!<br>
test1!!<br>
test1!!<br>
test1!!<br>
test1!!<br>
<div class="jqHandle jqResize"></div>
</div>
<div id="ex2" class="jqDnR" onclick="getXY()" style="z-index: 7">
test2!!<br>
test2!!<br>
test2!!<br>
test2!!<br>
test2!!<br>
<div class="jqHandle jqResize"></div>
</div>
</div>
</body>
</html>
扫一扫
4986
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
