基于JQUERY的动态创建可移动层
来源：互联网 发布：怎样删除软件注册表 编辑：程序博客网 时间：2024/05/17 22:21
<!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>
- 基于JQUERY的动态创建可移动层
- 基于jquery的可移动dialog 和 页面遮盖层
- jquery创建可编辑的动态表格
- javascript动态创建可拖动、最大化、最小化的层
- 显示可移动的层
- 可移动层的实现
- 可移动的DIV层
- 可移动的弹出层
- Jquery可移动的DIV
- 创建可移动的视图
- 可移动的弹出层(不支持FF)
- 可移动层的实现示例
- 可移动的弹出层源码
- 基于jquery的关于动态创建DOM元素的问题
- 基于Jquery的动态创建DOM元素的代码
- 基于css+div+jquery的 可伸缩层和选项卡
- 基于 Spring 和 iBATIS 的动态可更新多数据源持久层
- 弹出可移动层
- POJ 3261 Milk Patterns(可重叠的K次最长重复子串）
- Shadow Maping
- GridView实现分页功能
- 使用 org.apache.commons.net.ftp.FTPClient 实现下载功能 执行第二次时 会在input = ftpClient.retrieveFi
- “胜不骄、败不馁” 是SEO最好的心态
- 基于JQUERY的动态创建可移动层
- java 写 Lab转rgb、rgb转Lab
- ROS2.9.27网吧限速脚本
- 自己写的一个存储过程例子，用来增加字段
- 我阅读电子书的方法
- Effective C++ 3rd 的一点评论-----最有效的学习C++的方式
- Android开发之常用代码片段
- javascript --获取css样式最终的属性值
- Linux 内存管理系统：初始化
