利用修改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对象中, 在页面刷新的时候将父页面的值取出来, ...
随机推荐
- Ubuntu 13.04 用户安装 gnome 3.8 桌面
昨天我试用了一把 Ubuntu gnome 13.04,如果你看了那一片文章:Ubuntu Gnome 13.04 体验截图.对 Ubuntu gnome 13.04 并不是采用的gnome 3.8 ...
- 写一个程序，乞讨1+2*2+3*3+n*n值 Java
public static void main(String[] args) { // 1*1+2*2+3*3+n*n int n = 40; // 1 ...
- emeditor 配置教程
1.众多的图形界面配置功能 通过查看EmEditor的安装目录,可以发现,EmEditor有几个配置文件,理论上应该可以通过修改配置文件来达到配置EmEditor的目 的.然而,打开配置文件一看,如果 ...
- Windows下Git服务器搭建[转]
Windows下Git服务器搭建 作为对前两天Git服务器搭建的一个整理,我想分别从服务端和客户端两个角度来记录下整个搭建过程,为了达到目标,我们需要哪些操作. (一)服务端软件和账号的安装配置 ...
- Tomcat部署发布JSP应用程序的三种方法 (转)
Tomcat部署发布JSP应用程序的三种方法 1.直接放到Webapps目录下 Tomcat的Webapps目录是Tomcat默认的应用目录,当服务器启动时,会加载所有这个目录下的应 ...
- quick-cocos2d-x endToLua 退出会卡住
问题: 马上赚钱,退出会出现卡住,然后清理,死界面的情况,百思不得其解,昨天在做push的时候,突然发现.在android里面弹出一个退出对话框,点击确定退出,这时候调用endtolua时,有时也会切 ...
- net搭建热插拔式web框架
net搭建热插拔式web框架(重造Controller) 由于.net MVC 的controller 依赖于HttpContext,而我们在上一篇中的沙箱模式已经把一次http请求转换为反射调用,并 ...
- 流量计算-Jstorm提交Topology过程(下一个)
马上部分流量计算-Jstorm提交Topology过程(上), 5.上篇任务已经ServiceHandler.submitTopologyWithOpts()方法.在该方法中,会实例化一个Topolo ...
- sqlserver 无法初始化via支持库[QLVIPL.DLL]
安装数据库后,在sqlserver configuration manager, sqlserver的网络配置,有将协议 shared memory,named pipes,tcp/ip,via全部启 ...
- Android Tween Animation
View Animation, 它显示在view向上Tween Animation Tween动画.本质上没有变化View对象本身.只要改变它绘制 实施方式有两种.一个xml定义,直接在代码中的定义 ...