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

最新文章

  1. 读取TDrawGrid之获取博易数据
  2. Objective-C中把数组中字典中的数据转换成URL
  3. .Net Core 之 图形验证码
  4. HTML5的 2D SVG和SVG DOM的学习笔记（2）---SVG动画
  5. [数据库]SQL Server 用户NT AUTHORITY\IUSR 登录失败
  6. jsp iframe example
  7. js上传图片预览
  8. JS模块式开发
  9. 《day09---继承-抽象类-接口》
  10. STL容器用法速查表：list,vector,stack,queue,deque,priority_queue,set,map
  11. IOS第三方地图－百度地图集成
  12. 惊叹jQuery(解决jQuery对象到DOM的转换)
  13. VirtualBox集群建立和网络配置
  14. JavaScript高级程序设计---学习笔记（三）
  15. ASP.NET MVC + ECharts图表案例
  16. RSA简介(三)——寻找质数
  17. Django模板语言初识
  18. 关于eclipse常用的一些快捷键
  19. Notepad++ 安装 NppFTP 插件
  20. jQuery中bind() live() delegate() on() 的区别

热门文章

  1. Timus 1777. Anindilyakwa 奇怪的问题计数
  2. MVC @Html控件
  3. linux 文件查看目录的数
  4. Acdreamoj1115(数学思维称号)
  5. 使用Intellij Idea生成可执行文件jar，开关exe文件步骤
  6. Android－管理Activity生命周期 －开始一个Activity
  7. DevExpress 12.1 换肤 超级简单的方法(2013-11-5版)
  8. form 为什么上传文件enctype现场
  9. windows下VC界面 DIY系列1----写给想要写界面的C++程序猿的话
  10. Paypal-Express Checkout快捷支付方式的android端开发心得（二）