原文:利用修改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. MIPS台OpenWrt在系统内的路由器Rust应用程序开发

    笔者:Liigo(庄小莉) 迄今:2014年9一个月17日本 (9一个月29日更新,11一个月19日本再次更新.在最后可用更新) 原文链接:http://blog.csdn.net/liigo/art ...

  2. 《深入了解mybatis原则》 MyBatis架构设计和案例研究

    MyBatis这是现在很流行ORM框架,这是非常强大.事实上现却比較简单.优雅. 本文主要讲述MyBatis的架构设计思路,而且讨论MyBatis的几个核心部件.然后结合一个select查询实例.深入 ...

  3. Metatable和Metamethod（转）

    Metatable和Metamethod是用来干啥的?它们可以使得表a和b的表达式“a + b”变得有意义,其中metatable使两个不相关的表a和b之间可以进行操作,而操作的具体行为比如说&quo ...

  4. Android异步操作总结

    Android中常常会有一些操作比方网络请求,文件读写.数据库操作.比較耗时,我们须要将其放在非UI线程去处理.此时.我们须要处理任务前后UI的变化和交互.我们须要通过类似js中异步请求处理,这里总结 ...

  5. (2) 用DPM(Deformable Part Model，voc-release4.01)算法在INRIA数据集上训练自己的人体检測模型

    步骤一,首先要使voc-release4.01目标检測部分的代码在windows系统下跑起来: 參考在window下执行DPM(deformable part models) -(检測demo部分) ...

  6. mysql 删除重复数据sql声明

    CREATE TABLE tmp AS SELECT id FROM get_review_url WHERE (no,title,name,content) IN (SELECT no,title, ...

  7. Notification和Activity交互

    概述 通知(Notification)就是程序在不影响用户操作的情况下,通过手机顶部弹出消息告诉用户的一种信息通知方式,而且能够通过下拉通知操作抽屉通知,实现Notification与活动.通知和服务 ...

  8. mysql出现Data truncated for column

    1.首先叙述,描述你自己的问题. 假设你想把同意为空值的勾去掉.. .恰巧数据库中的数据 processed_f 为空没有值. . . .这时候你对数据表结构做更改的时候就会出现Data trunca ...

  9. C#中调用c++的dll

    C#中调用c++的dll具体创建与调用步骤,亲测有效~   使用的工具是VS2010哦~其他工具暂时还没试过 我新建的工程名是my21dll,所以会生成2个同名文件.接下来需要改动的只有画横线的部分 ...

  10. java.io.NotSerializableException

    结果发现序列不成功非静态内部类时的序列中,出现以下异常: java.io.NotSerializableException: com.tang.sharedpreferencesdemo.MainAc ...