原文:利用修改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. 【Android进阶】让程序运行效率更高的编程技巧总结

    1.在程序中若出现字符串连接的情况,请使用StringBuffer代替String,这样可以减少多次创建String以及垃圾回收所带来的内存消耗 2.尽量使用局部变量.调用方法时传递的参数以及调用中创 ...

  2. Android自己定义组件系列【5】——高级实践（1）

    在接下来的几篇文章将任老师的博文<您可以下拉PinnedHeaderExpandableListView实现>骤来具体实现.来学习一下大神的代码并记录一下. 原文出处:http://blo ...

  3. js多个物体运动的问题1

    问题2 http://www.cnblogs.com/huaci/p/3854304.html 用js写一个物体的运动很简单.如果一个页面有多个物体在运动,它会不会出问题呢? ok,我们来看一个示例 ...

  4. 黑马程序员—创建JDBC框架及原理分析

    对于Java数据库的连接,由最初学习的每次全部手工代码,到后面的不断利用知识简化代码量:这是不断学习的过程,就像人类由原始社会的钻木取火到当代的文明,都是一步步过来的! 本文不从最开始的JDBC入门开 ...

  5. can&#39;t connect to mysql server on localhost &lt;10061&gt;

    需要启动MySQL服务.它可以通过两种方式来启动使用MySQL: 1.命令行模式. Win+R,进入cmd然后按Enter键.在命令行形式的输入: net start mysql56 mysql56是 ...

  6. c++ 学籍管理系统v 1.0

    #include<iostream> #include <string> #include<conio.h> using namespace std; class ...

  7. 移动端 touchmove高频事件与requestAnimationFrame的结合优化

    移动端最高频耗内存的的操作  莫属 touchmove 与scroll事件  两者需要 微观的 优化,使用 requestAnimationFrame性能优化 H5性能优化requestAnimati ...

  8. HTML DOM nodeName nodeValue

    在javascript在,我们得title在标签和文本,它们通常要求这样做 var obj =document.getElementsById("id1"); obj.nodeNa ...

  9. 关于int全区变量读写的原子性

    关于int全区变量读写的原子性     关于int变量的读写是否原子性网上有非常多讨论,貌似不同平台不同,这里自己做实如今arm9平台測试.这里要注意原子性并不是指一条汇编才原子,实际上即使一次赋值编 ...

  10. 提高duilib的richedit控制的一些特征

    转载请注明原始出处.谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41208207 假设要使用透明异形窗口功能,首先要改进duilib库让他 ...