原文:利用修改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>