利用修改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对象中, 在页面刷新的时候将父页面的值取出来, ...
随机推荐
- Net 高效开发
Net 高效开发之不可错过的实用工具 工欲善其事,必先利其器,没有好的工具,怎么能高效的开发出高质量的代码呢?本文为各ASP.NET 开发者介绍一些高效实用的工具,涉及SQL 管理,VS插件,内存 ...
- JQuery+CSS3实现封装弹出登录框效果
原文:JQuery+CSS3实现封装弹出登录框效果 上次发了一篇使用Javascript来实现弹出层的效果,这次刚好用了JQuery来实现,所以顺便记录一下: 因为这次使用了Bootstrap来做一个 ...
- C# Windows Phone 8 WP8 开发，将WebClient的DownloadStringCompleted事件改成非同步的awiat方法。
原文:C# Windows Phone 8 WP8 开发,将WebClient的DownloadStringCompleted事件改成非同步的awiat方法. 一般我们在撰写Windows Phone ...
- 做web项目时对代码修改后浏览器端不生效的应对方法（持续更新）
做web项目时,经常会遇到修改了代码,但浏览器端没有生效,原因是多种多样的,我会根据我遇到的情况逐步更新解决办法 1.运行的时候采用debug模式,一般情况下使用项目部署按钮右边那个按钮下的tomca ...
- iSwifting如何发送照片社区
登录iSwifting社区 1,首先点击"帖子": 2,点击"照片": 3.点击"选择文件上传" 4,上传后的照片: 5,点击上传的照片: ...
- T-SQL基础(5) - 表表达式
1.派生表(derived table)select YEAR(orderdate) as orderyear, COUNT(distinct custid) as numcustsfrom Sale ...
- Hadoop读书笔记（二）HDFS的shell操作
Hadoop读书笔记(一)Hadoop介绍:http://blog.csdn.net/caicongyang/article/details/39898629 1.shell操作 1.1全部的HDFS ...
- 2048 Puzzle游戏攻略
2048 Puzzle这是目前手机游戏的很火. 在地铁上经常看到的人玩这个游戏. 首先,简介2048 Puzzle游戏. 游戏界面是4X4广场格,每一方格可以放置在数字. 有四种移动数字的方法,向左. ...
- BootstrapQ 包Bootstrap tree，dialog等待
官方网站:http://uikoo9.com/bootstrapQ why 事实上bootstrap已经非常好了,唯一的软肋就是js方面有些薄弱,对照easyui就知道了. 能够非常明显的知道boot ...
- 乐在其中设计模式(C#) - 适配器模式(Adapter Pattern)
原文:乐在其中设计模式(C#) - 适配器模式(Adapter Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 适配器模式(Adapter Pattern) 作者:webabc ...