原文:利用修改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自定义布局功能的更多相关文章

  1. 利用腾讯云COS云对象存储定时远程备份网站

    版权声明:本文由张戈 原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/942851001487125915 来源:腾云阁 h ...

  2. Node.js基于Express框架搭建一个简单的注册登录Web功能

    这个小应用使用到了node.js  bootstrap  express  以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注 ...

  3. OSS对象存储

    OSS对象存储 当项目以微服务搭建时,多个服务往往运行在多台服务器上,此时针对存储文件的获取和保存,难以确定具体的位置: 针对这个问题,一般有两个办法: 搭建独立的文件存储服务器,用 FastDFS等 ...

  4. js对象和jQuery对象相互转换

    (1)什么是js对象及代码规则 就是使用js-API,即Node接口中的API或是传统JS语法定义的对象,叫做js对象 js代码规则----divElement var divElement = do ...

  5. jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象

    这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...

  6. mysql——修改表名、修改字段名、修改字段数据类型、增加字段、删除字段、修改字段排列位置、修改存储引擎、删除表 （示例）

    一.创建表和插入数据: ), mz ), bz ) ); ,'sww','sww01'); ,'aww','aww02'); ,'qww','qww03'), (,'eww','eww04'), (, ...

  7. 如何利用京东云的对象存储（OSS）上传下载文件

    作者:刘冀 在公有云厂商里都有对象存储,京东云也不例外,而且也兼容S3的标准因此可以利用相关的工具去上传下载文件,本文主要记录一下利用CloudBerry Explorer for Amazon S3 ...

  8. 如何利用fastjson将JSON格式的字符串转换为Map，再返回至前端成为js对象

    //注意,这里的jsonStr是json格式的字符串,里面如果遇到双引号嵌套双引号的,一般是嵌套的双引号经过转义 //    \",假如有这样的一个场景,这些字符串里面有需要的css样式的j ...

  9. 利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据

    利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据 实现描述:将数据存放在js对象中, 然后放在父页面的document对象中, 在页面刷新的时候将父页面的值取出来, ...

随机推荐

  1. HDOJ 4687 Boke and Tsukkomi 一般图最大匹配带花树+暴力

    一般图最大匹配带花树+暴力: 先算最大匹配 C1 在枚举每一条边,去掉和这条边两个端点有关的边.....再跑Edmonds得到匹配C2 假设C2+2==C1则这条边再某个最大匹配中 Boke and ...

  2. 【原创】leetCodeOj --- Largest Number 解题报告

    原题地址: https://oj.leetcode.com/problems/largest-number/ 题目内容: Given a list of non negative integers, ...

  3. CLR Profile解决内存占用过高

    CLR Profile解决内存占用过高的问题 炮哥:"嘿,哥们,忙啥呢,电脑卡成这逼样." 勇哥:"在用CLR Profile工具分析下FlexiPrint的内存占用情况 ...

  4. Directx11学习笔记【二十】 使用DirectX Tool Kit加载mesh

    本文由zhangbaochong原创,转载请注明出处:http://www.cnblogs.com/zhangbaochong/p/5788482.html 现在directx已经不再支持.x文件了, ...

  5. C#使用SqlBulkCopy将DataTable写入数据库的表中（表不存在则创建新表,数据存在则更新,不存在则插入）

    原文:.net使用SqlBulkCopy导入数据(创建新表) .net2.0后ado.net提供了一个快速导入sqlserver的方法sqlbulkcopy.导入效率非常高.  包装了一个简单的sql ...

  6. IIS7构造Gzip压缩

    IIS7构造Gzip压缩 本文来自Kevin Yang博客 作者:Kevin Yang 开启配置HTTP压缩(GZip) 在IIS7中配置Gzip压缩相比IIS6来说实在easy了很多.并且默认情况下 ...

  7. Vim设置colorscheme小技巧

    Vim的颜色主题在/usr/share/vim/vim73/colors目录里.打开vim后在normal模式下输入":colorscheme"查看当前的主题,改动主题使用命令&q ...

  8. 【Linux探索之旅】第一部分第二课：下载Linux，免费的噢

    内容简介 1.第一部分第二课:下载Linux,免费的噢 2.第一部分第三课预告:测试并安装Ubuntu 下载Linux,免费的噢 大家好,上一课我们认识了非常“霸气侧漏”的Linux操作系统. 也知道 ...

  9. c# 操作 MongoDB 的 第三方类库 MongoRepository

    https://github.com/RobThree/MongoRepository 文档 https://github.com/RobThree/MongoRepository/wiki/Docu ...

  10. resharper 设置代码颜色