利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能
原文:利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能
利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能
1.在界面上添加几个checkbox和一个接收动态添加div的容器
<div>
功能区域
<br />
<input id="1" type="checkbox" value="新闻" name="11" />新闻
<input id="2" type="checkbox" value="公告" name="22" />公告
<input id="3" type="checkbox" value="动态" name="33" />动态
</div>
<div id="ADD">
</div>
2.创建DIV对象和对象数组
function DivObj(id, move, x, y) {
this.ID = id;
this.Move = move;
this.X = x;
this.Y = y;
this.width = 400;
this.height = 300;
return this;
}
var DivArray = [];
3.在入口函数里面对checkbox的点击事件进行处理
$(function () {
$(":checkbox").click(function () {
if ($(this).attr("checked") == "checked") {
//alert($(this).val());
$("#ADD").append('<div id="' + $(this).val() + '" class="divClass">' + $(this).val() + '<br/></div>');
//每次添加一个DIV，都初始化div的事件处理
divevent($(this).val());
//调用ajax获取指定功能的URL，然后再去或者数据
}
else {
$("#" + $(this).val()).remove();
}
});
});
4.添加DIV的点击,鼠标移动,释放鼠标点击等事件的处理，动态设置DIV的宽和高
function divevent(id) {
var isexist = false;
var index = 0;
for (var i = 0; i < DivArray.length; i++) {
if (DivArray[i].ID == id) {
isexist = true;
index = i;
break;
}
}
if (!isexist) {
index = DivArray.length;
var object = new DivObj(id, false, 20 * index + 100, 20 * index + 60);
DivArray.push(object);
}
var _x, _y;//鼠标离控件左上角的相对位置
//alert(PageArray[index].X);
$("#" + id).css({ top: DivArray[index].Y, left: DivArray[index].X });
$("#" + id).css({ width: DivArray[index].width, height: DivArray[index].height });
$("#" + id).click(function () {
//$("#" + id).css({z-index: 99999});
$("#" + id).css({"z-index":99999});
//alert("click");//点击（松开后触发）
}).mousedown(function (e) {
DivArray[index].Move = true;
_x = e.pageX - parseInt($("#" + id).css("left"));
_y = e.pageY - parseInt($("#" + id).css("top"));
$("#" + id).fadeTo("fast", 1);//点击后开始拖动并透明显示
});
$(document).mousemove(function (e) {
if (DivArray[index].Move) {
var x = e.pageX - _x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y = e.pageY - _y;
$("#" + id).css({ top: y, left: x });//控件新位置
DivArray[index].X = x;
DivArray[index].Y = y;
//$("#" + id).html(id + "X：" + x + "Y：" + y + "<br/>");
}
}).mouseup(function () {
DivArray[index].Move = false;
$("#" + id).fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
$("#" + id).css({ "z-index": -1 });
});
$("#" + id).append('宽：<input type="text" value="' + PageArray[index].width + '" onblur="$(this).parents().css({ width: $(this).val()});" mousemove="return;" click="return;" mouseup="return;"/><br/>高：<input type="text" value="' + PageArray[index].height + '" onblur="$(this).parents().css({ height: $(this).val()});" mousemove="return;" click="return;" mouseup="return;"/>');
}
运行结果
整体代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
.divClass {
position: absolute;
border: 1px solid #333333;
background-color: #777788;
text-align: center;
line-height: 400%;
font-size: 13px;
z-index: -1;
}
</style>
</head> <body>
<div>
功能区域
<br />
<input id="1" type="checkbox" value="新闻" name="11" />新闻
<input id="2" type="checkbox" value="公告" name="22" />公告
<input id="3" type="checkbox" value="动态" name="33" />动态
</div> <div id="ADD"> </div> <!--<div id="mag" style="margin-bottom:0px"></div>-->
</body>
</html>
<script src="../Scripts/jquery-1.8.2.js"></script>
<script>
function DivObj(id, move, x, y) {
this.ID = id;
this.Move = move;
this.X = x;
this.Y = y;
this.width = 400;
this.height = 300;
return this;
}
var DivArray = [];
$(function () {
$(":checkbox").click(function () {
if ($(this).attr("checked") == "checked") {
//alert($(this).val());
$("#ADD").append('<div id="' + $(this).val() + '" class="divClass">' + $(this).val() + '<br/></div>');
divevent($(this).val());
//调用ajax获取指定功能的URL，然后再去或者数据
}
else {
$("#" + $(this).val()).remove();
}
}); }); function divevent(id) { var isexist = false;
var index = 0;
for (var i = 0; i < DivArray.length; i++) {
if (DivArray[i].ID == id) {
isexist = true;
index = i;
break;
}
}
if (!isexist) {
index = DivArray.length;
var object = new DivObj(id, false, 20 * index + 100, 20 * index + 60);
DivArray.push(object);
}
var _x, _y;//鼠标离控件左上角的相对位置
//alert(PageArray[index].X);
$("#" + id).css({ top: DivArray[index].Y, left: DivArray[index].X }); $("#" + id).css({ width: DivArray[index].width, height: DivArray[index].height }); $("#" + id).click(function () {
//$("#" + id).css({z-index: 99999});
$("#" + id).css({"z-index":99999});
//alert("click");//点击（松开后触发）
}).mousedown(function (e) {
DivArray[index].Move = true;
_x = e.pageX - parseInt($("#" + id).css("left"));
_y = e.pageY - parseInt($("#" + id).css("top"));
$("#" + id).fadeTo("fast", 1);//点击后开始拖动并透明显示
});
$(document).mousemove(function (e) {
if (DivArray[index].Move) {
var x = e.pageX - _x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y = e.pageY - _y;
$("#" + id).css({ top: y, left: x });//控件新位置
DivArray[index].X = x;
DivArray[index].Y = y;
//$("#" + id).html(id + "X：" + x + "Y：" + y + "<br/>");
}
}).mouseup(function () {
DivArray[index].Move = false;
$("#" + id).fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
$("#" + id).css({ "z-index": -1 });
}); $("#" + id).append('宽：<input type="text" value="' + PageArray[index].width + '" onblur="$(this).parents().css({ width: $(this).val()});" mousemove="return;" click="return;" mouseup="return;"/><br/>高：<input type="text" value="' + PageArray[index].height + '" onblur="$(this).parents().css({ height: $(this).val()});" mousemove="return;" click="return;" mouseup="return;"/>');
}
</script>
利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能的更多相关文章
- 利用腾讯云COS云对象存储定时远程备份网站
版权声明:本文由张戈 原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/942851001487125915 来源:腾云阁 h ...
- Node.js基于Express框架搭建一个简单的注册登录Web功能
这个小应用使用到了node.js bootstrap express 以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注 ...
- OSS对象存储
OSS对象存储 当项目以微服务搭建时,多个服务往往运行在多台服务器上,此时针对存储文件的获取和保存,难以确定具体的位置: 针对这个问题,一般有两个办法: 搭建独立的文件存储服务器,用 FastDFS等 ...
- js对象和jQuery对象相互转换
(1)什么是js对象及代码规则 就是使用js-API,即Node接口中的API或是传统JS语法定义的对象,叫做js对象 js代码规则----divElement var divElement = do ...
- jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象
这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...
- mysql——修改表名、修改字段名、修改字段数据类型、增加字段、删除字段、修改字段排列位置、修改存储引擎、删除表 （示例）
一.创建表和插入数据: ), mz ), bz ) ); ,'sww','sww01'); ,'aww','aww02'); ,'qww','qww03'), (,'eww','eww04'), (, ...
- 如何利用京东云的对象存储（OSS）上传下载文件
作者:刘冀 在公有云厂商里都有对象存储,京东云也不例外,而且也兼容S3的标准因此可以利用相关的工具去上传下载文件,本文主要记录一下利用CloudBerry Explorer for Amazon S3 ...
- 如何利用fastjson将JSON格式的字符串转换为Map，再返回至前端成为js对象
//注意,这里的jsonStr是json格式的字符串,里面如果遇到双引号嵌套双引号的,一般是嵌套的双引号经过转义 // \",假如有这样的一个场景,这些字符串里面有需要的css样式的j ...
- 利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据
利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据 实现描述:将数据存放在js对象中, 然后放在父页面的document对象中, 在页面刷新的时候将父页面的值取出来, ...
随机推荐
- C# 隐藏 Windows Phone 侦错模式中萤幕右上角的数据条(模拟器、实机可用)，截图好方便。
原文:C# 隐藏 Windows Phone 侦错模式中萤幕右上角的数据条(模拟器.实机可用),截图好方便. 一般我们在开发Windows Phone App时,会使用模拟器或是实体的手机开发,在Vi ...
- JDK源码学习系列03----StringBuffer+StringBuilder
JDK源码学习系列03----StringBuffer+StringBuilder 由于前面学习了StringBuffer和StringBuilder的父类A ...
- error C2248: “CObject::operator =”: 不可访问 private 员(于“CObject”类声明)
MFC如果编码错误: 演出:error C2248: "CObject::operator =": 不可访问 private 员(于"CObject"类声明) ...
- （二十）unity4.6得知Ugui中国文献-------另外-InputModules
大家好.我是太阳广东. 转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unitym ...
- 玩转web之servlet(六)---session介绍及简单使用（登录验证中保存信息）
在浏览器与服务器进行交互时,往往需要把涉及到的一些数据保存下来,这时就需要使用cookie或session进行状态管理. 这篇文章先来说说session怎么用,首先在servlet中创建一个sessi ...
- (hdu step 7.1.2)You can Solve a Geometry Problem too(乞讨n条线段,相交两者之间的段数)
称号: You can Solve a Geometry Problem too Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/ ...
- Tuxedo学习门户网站
中间件简介: 介于客户机和server之间的夹层,突破了传统的c/s架构,为构建大规模,高性能.分布式c/s应用程序提供了通信.事物,安全.容错等基础服务,屏蔽了底层应用细节,应用程序不必从底层开发, ...
- ZOJ - 3822 Domination （DP）
Edward is the headmaster of Marjar University. He is enthusiastic about chess and often plays chess ...
- $POST 、$HTTP_RAW_POST_DATA、php://input三者之间的差别
$POST .$HTTP_RAW_POST_DATA.php://input三者之间的差别 总是产生变量包括有原始的 POST 数据.否则,此变量仅在碰到未识别 MIME 类型的数据时产生.只是,訪问 ...
- java中用正則表達式推断中文字符串中是否含有英文或者数字
public static boolean includingNUM(String str)throws Exception{ Pattern p = Pattern.compile(" ...