利用修改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).prop("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="' + DivArray[index].width + '" onblur="$(this).parents().css({ width: $(this).val()});" mousemove="return;" click="return;" mouseup="return;"/><br/>高：<input type="text" value="' + DivArray[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).prop("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="' + DivArray[index].width + '" onblur="$(this).parents().css({ width: $(this).val()});" mousemove="return;" click="return;" mouseup="return;"/><br/>高：<input type="text" value="' + DivArray[index].height + '" onblur="$(this).parents().css({ height: $(this).val()});" mousemove="return;" click="return;" mouseup="return;"/>'); } </script>