google个性化桌面实现？？？？？？？？？？？？？？？？？？？？？？？？？？【标题要长】

本帖最后由 ymdcr 于 2010-05-21 16:58:41 编辑

解决方案 »

  1.   

    设置模块为DIV显示，通过JS拖动DIV
    同时通过AJAX异步设置参数
    http://topic.csdn.net/u/20091213/23/39E072B0-DA4B-48E5-A20A-21DDBD0331BC.html
      

  2.   

    就是google的功能性桌面软件http://desktop.google.com/zh/index.html
      

  3.   

    Ajax里面有这些控件，好像叫什么名字，忘了，楼主查下资料
      

  4.   

    http://learning.artech.cn/20080621.mastering-javascript-jquery.html
      

  5.   

    有没有类似extjs之类的东西
    可以方便实现，而不是直接写巨大不无的js脚本
    js我也没那么牛
      

  6.   

    那就建议使用jquery吧，里面有实现这样功能的，如果需要我可以发一个例子给你。
      

  7.   

    google是通过js和后台的服务自己实现的。
      

  8.   

    设置模块为DIV显示，通过JS拖动DIV
    同时通过AJAX异步设置参数
    http://topic.csdn.net/u/20091213/23/39E072B0-DA4B-48E5-A20A-21DDBD0331BC.html
      

  9.   

    给你贴段代码，别人的
    改了下，注释掉了点，删了点<html>
        <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>       body {margin: 0px;padding: 0px;font-size: 12px;text-align: center;}            
     body > div {
      text-align: center;
      margin-right: auto;
      margin-left: auto;
      }            
     .content {
      width: 900px;#0000ff;
     }            
     .content .left {float: left;
     width: 20%;    
     border: 1px solid #FF0000;
      margin: 3px;
     } .content .center {
     float: left;
     border: 1px solid #FF0000;
      margin: 3px;
        width: 57%
     }
     .content .right {
     float: right;
     width: 20%;
     border: 1px solid #FF0000;
      margin: 3px
                }
                .mo {
                    height: auto;
                    border: 1px solid #CCC;
                    margin: 3px;
                    background: #FFF
                }
                .mo h1 {
                    background: #afc9f6;
                    height: 18px;
                    padding: 3px;
                    cursor: move
                }
                .mo .nr {
                    height: 80px;
                    border: 1px solid #F3F3F3;
                    margin: 2px
                }
                h1 {
                    margin: 0px;
                    padding: 0px;
                    text-align: left;
                    font-size: 12px;
                    height: 20px
                }
                h1 span {
                    float: left
                } 
                h1 font {
                    float: right;
                    cursor: pointer
                }
            </style>
            <script>
                var dragobj = {}; window.onerror = function(){return false;
                }window.oDel = function(obj){if ($(obj) != null) {
    $(obj).parentNode.removeChild($(obj));  }
    }var domid = 12;function on_ini(){ String.prototype.inc = function(s){//string.inc()判断字符串中是否包含参数string，此处用来判断浏览器
                        return this.indexOf(s) > -1 ? true : false;
                    }
                    var agent = navigator.userAgent;//得到head，用来判断浏览器类型
                    window.isOpr = agent.inc("Opera");//Opera
                    window.isIE = agent.inc("IE") && !isOpr;//IE
                    window.isMoz = agent.inc("Mozilla") && !isOpr && !isIE;//Mozilla
                    if (isMoz) {
                        Event.prototype.__defineGetter__("x", function(){
                            return this.clientX + 2;
                        });
                        Event.prototype.__defineGetter__("y", function(){
                            return this.clientY + 2;
                        });
                        Event.prototype.__defineGetter__("srcElement", function(){
                            var node = this.target;
                            while (node.nodeType != 1) {
                                node = node.parentNode;
                            }
                            return node;
                        });
                    }
                    basic_ini();
                }
                function basic_ini(){
    window.$ = function(obj){
    return typeof(obj) == "string" ? document.getElementById(obj) : obj;
    }
    window.oDel = function(obj){
    if ($(obj) != null) {
    $(obj).parentNode.removeChild($(obj));
    }
    }
    }
    window.onload = function(){//页面加载初始化方法
    on_ini();
    var o = document.getElementsByTagName("h1");
    for (var i = 0; i < o.length; i++) {
    o[i].onmousedown = addevent;
    }
    }
    function addevent(e){
     if (dragobj.o != null) 
     return false;
     e = e || event;
    var ee = e.srcElement;
    if (ee.tagName == "FONT") 
     return;
    dragobj.o = this.parentNode;
    dragobj.xy = getxy(dragobj.o);
    dragobj.xx = new Array((e.x - dragobj.xy[1]), (e.y - dragobj.xy[0]));
    dragobj.o.style.width = dragobj.xy[2] + "px";
     dragobj.o.style.height = dragobj.xy[3] + "px";
     dragobj.o.style.left = (e.x - dragobj.xx[0]) + "px";
     dragobj.o.style.top = (e.y - dragobj.xx[1]) + "px";
    dragobj.o.style.position = "absolute";
    var om = document.createElement("div");
    dragobj.otemp = om;
    om.style.width = dragobj.xy[2] + "px";
     om.style.height = dragobj.xy[3] + "px";
    dragobj.o.parentNode.insertBefore(om, dragobj.o);
    return false;
                }
                
                document.onselectstart = function(){
                    return false;
                }
                window.onfocus = function(){
                    document.onmouseup();
                }
                window.onblur = function(){
                    document.onmouseup();
                }
                document.onmouseup = function(){
                    if (dragobj.o != null) {
                        dragobj.o.style.width = "auto";
                        dragobj.o.style.height = "auto";
                        dragobj.otemp.parentNode.insertBefore(dragobj.o, dragobj.otemp);
                        dragobj.o.style.position = "";
                        oDel(dragobj.otemp);
                        dragobj = {};
                    }
                }
                document.onmousemove = function(e){
                    e = e || event;
                    if (dragobj.o != null) {
                        dragobj.o.style.left = (e.x - dragobj.xx[0]) + "px";
                        dragobj.o.style.top = (e.y - dragobj.xx[1]) + "px";
                        createtmpl(e);
                    }
                }
                function getxy(e){
                    var a = new Array();
                    var t = e.offsetTop;
                    var l = e.offsetLeft;
                    var w = e.offsetWidth;
                    var h = e.offsetHeight;
                    while (e = e.offsetParent) {
                        t += e.offsetTop;
                        l += e.offsetLeft;
                    }
                    a[0] = t;
                    a[1] = l;
                    a[2] = w;
                    a[3] = h
                    return a;
                }
                
                function inner(o, e){
                    var a = getxy(o);
                    if (e.x > a[1] && e.x < (a[1] + a[2]) && e.y > a[0] && e.y < (a[0] + a[3])) {
                        if (e.y < (a[0] + a[3] / 2)) 
                            return 1;
                        else 
                            return 2;
                    }
                    else 
                        return 0;
                }
                
                function createtmpl(e){
                    for (var i = 0; i < domid; i++) {
                        if (!$("m" + i)) 
                            continue;
                        if ($("m" + i) == dragobj.o) 
                            continue;
                        var b = inner($("m" + i), e);
                        if (b == 0) 
                            continue;
                        dragobj.otemp.style.width = $("m" + i).offsetWidth;
                        if (b == 1) {
                            $("m" + i).parentNode.insertBefore(dragobj.otemp, $("m" + i));
                        }
                        else {
                            if ($("m" + i).nextSibling == null) {
                                $("m" + i).parentNode.appendChild(dragobj.otemp);
                            }
                            else {
                                $("m" + i).parentNode.insertBefore(dragobj.otemp, $("m" + i).nextSibling);
                            }
                        }
                        return
                    }
                    for (var j = 0; j < 3; j++) {
                        if ($("dom" + j).innerHTML.inc("div") || $("dom" + j).innerHTML.inc("DIV")) 
                            continue;

                        var op = getxy($("dom" + j));
                        if (e.x > (op[1] + 10) && e.x < (op[1] + op[2] - 10)) {
                            $("dom" + j).appendChild(dragobj.otemp);
                            dragobj.otemp.style.width = (op[2] - 10) + "px";
                        }
                    }
                }
                
                function add_div(){
                    var o = document.createElement("div");
                    o.className = "mo";
                    o.id = "m" + domid;
                    $('dom0').appendChild(o);
                    o.innerHTML = "<h1><span>新div</span><font onclick='del_div(this)'>&nbsp;x</font><font onclick=javascript:alert('edit')>edit  </font></h1><div class=nr></div>";
                    o.getElementsByTagName("h1")[0].onmousedown = addevent;
                    domid++;
                }
                
                function del_div(obj){
                    var o = obj.parentNode.parentNode;
                    oDel(o);
                }
            </script>
        </head>
        <body>
            <INPUT TYPE="button" value="添加DIV" onclick="add_div();">
            <div class=content>
                <div class=left id=dom0>
            
                    <div class=mo id=m3>
                        <h1><span>dom3</span>
                            <font onclick="del_div(this)">
                                x
                            </font>
                        </h1>
                        <div class="nr">
                        </div>
                    </div>
                </div>
                <div class=center id=dom1>
                   
                    <div class=mo id=m6>
                        <h1><span>dom6</span>
                            <font onclick="del_div(this)">
                                x
                            </font>
                        </h1>
                        <div class="nr">
                        </div>
                    </div>
                    <div class=mo id=m7>
                        <h1><span>dom7</span>
                            <font onclick="del_div(this)">
                                x
                            </font>
                        </h1>
                        <div class="nr">
                        </div>
                    </div>
                </div>
                <div class=right id=dom2>
                 
                    <div class=mo id=m11>
                        <h1><span>dom11</span>
                            <font onclick="del_div(this)">
                                x
                            </font>
                        </h1>
                        <div class="nr">
                        </div>
                    </div>
                </div>
            </div>
        </body>
    </html>
      

  10.   

    http://topic.csdn.net/u/20080413/13/5a4e8e29-821e-49bb-827a-c4146a9ad694.html
      

  11.   

    ajax 调用
    cookie保存位置
    ps：jquery很多插件都可以做出来