请教这个窗口动态拖动到固定位置是怎么实现的呢？PHPAJAX，还是mootools呢？

知名的js库一般都有教程的.
google 一下 mootools dragdrop
http://demos.mootools.net/DragDrop

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>/</title>
    <style type="text/css">
    html, body {
     width:100%;
     height:100%;
     padding:0px;
     margin:0px;
    }
    body {
     text-align:center;
     font-size:14px;
    }
    .cell_left, .cell_right {
     width:202px;
    }
    .cell_center {
     width:404px;
    }
    .left {
     float:left;
    }
    .row {
     clear:both;
    }
    .r_nbsp {
     width:20px;
    }
    .root {
     width:876px;
     height:auto;
     margin:auto;
    }
    .root * {
    /*此属性FF的说*/
     -moz-user-select:none;
      

  2.   

    }
    .line {
     width:100%px;
     height:0px;
     overflow:hidden;
    }
    .move {
     border:#CCCCCC 1px solid;
     width:100%;
     height:aotu;
     margin-top:5px;
     margin-bottom:5px;
     display:none;
    }
    .title {
     height:24px;
     line-height:24px;
     background:#0080C0;
    }
    .title_a {
     width:auto;
     margin-right:80px;
     cursor:move;
     font-size:12px;
     font-weight:bold;
     color:#FFFFFF;
     text-align:left;
     padding-left:10px;
    }
    .title_reduce, .title_lock, .title_edit, .title_close {
     float:right;
     width:20px;
     font-size:9px;
     color:#CCCCCC;
    }
    .title_reduce, .title_lock, .title_edit {
     cursor:pointer;
    }
    .title_close {
     cursor:default;
    }
    .content {
     height:100px;
     border-top:#CCCCCC 1px solid;
     background-color:#F7F7F7;
     font-size:12px;
     line-height:130%;
    }
      

  3.   

    .CDrag_temp_div {
     border:#CCCCCC 1px dashed;
     margin-top:5px;
     margin-bottom:5px;
    }
    a#DEL_CDrag, a#ADD_CDrag {
     color:#6699CC;
     text-decoration:none;
    }
    a#DEL_CDrag:hover, a#ADD_CDrag:hover {
     color:#FF0000;
    }.Dall_screen, .Iall_screen {
     position:absolute;
     left:0px;
     top:0px;
    }
    .Dall_screen {
     z-index:99;
     background-color:#000000;
     filter:alpha(opacity=30);
     opacity:0.3;
    }
    .Iall_screen {
     z-index:98;
     filter:alpha(opacity=0);
     opacity:0;
    }
    .Nall_screen {
     position:absolute;
     z-index:100;
     left:300px;
     top:100px;
     width:300px;
     height:auto;
     border:#6699CC 1px solid;
     background-color:#F0FAFF;
     padding:10px 0 10px 0;
    }
    .Call_screen {
     width:100%;
     height:auto;
     line-height:30px;
     font-size:12px;
     padding-bottom:10px;
    }
    </style>
    <script type="text/javascript">
    var Class = {