<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery.js"></script>
</head>
<style type="text/css">
.drag{position:absolute;width:100px;height:100px;border:1px solid #ddd;background:#FBF2BD;text-align:center;padding:5px;top:95px;left:253px;cursor:move;}
</style>
<body>
<!--<div class="drag" onselectstart=return false;>这个层是可以拖动滴 ^_^ <br />
</div>-->
<p> </p>
<p> </p>
<table width="1133" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="175" height="200"> </td>
<td width="958" rowspan="4" height="299" ><div id="img_panel"><img src="top.gif" width="958" height="299" /><div></td>
</tr>
<tr>
<td height="22">X:<input name="x" id="x" size="8" type="text" value="0" /> Y:<input name="y" id="y" size="8" type="text" value="0" /></td>
</tr>
<tr>
<td height="11">TEXT:
<input name="t1" id="t1" size="15" type="text" value="请输入文本" /></td>
</tr>
<tr>
<td height="11"><input id="bt1" name="bt1" value="create" type="button" /></td>
</tr>
</table>
<script type="text/javascript">
// 层拖拽
$(function(){
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
var div_obj;
var flag = 0;
var main_x = $("#img_panel").position().left;
var main_y = $("#img_panel").position().top;
$(document).mousemove(function(e){
if(_move){
var x=e.pageX-_x;
var y=e.pageY-_y;
$(div_obj).css({top:y,left:x});//控件新位置
if(x>=main_x&&y>=main_y){
$("#x").val(x-main_x);
$("#y").val(y-main_y);
}
}
}).mouseup(function(){
_move=false;
$(div_obj).fadeTo("fast", 1);
});
$("#bt1").click(function(){
div_obj = "#drag" + flag;
flag++;
var div = document.createElement("div");
div.className = "drag";
div.id = div_obj.replace("#","");
div.onselectstart = function(){return false;};
div.onmousedown = function(){
div_obj = this;
_move=true;
_x=event.clientX-parseInt($(div_obj).css("left"));
_y=event.clientY-parseInt($(div_obj).css("top"));
$(div_obj).fadeTo(20, 0.5);}
document.body.appendChild(div);
$(div_obj).html($("#t1").val());
$(div_obj).css({top:main_y,left:main_x});
});
});
</script>
</body>
</html>