基于JQUERY的动态创建可移动层

<!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>&nbsp;</p>
<p>&nbsp;</p>
<table width="1133" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td width="175" height="200">&nbsp;</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>

你可能感兴趣的:(jquery,XHTML,function,input,div,BT)