拖拽DIV布局与页面保存

原文：http://www.rczjp.cn/ArticleShow.aspx?ID=218

<!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>
&nbs p;   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>拖拽布局与保存2中方法演示 </title>
    <style type="text/css">
    .td {background:#4259F9; text-align:center; height:200px; color:#FFFFFF; font-size:36px;}
    #root{margin:0px auto;width:900px;}
    #col1 {width:200px;float:left;}
    #col2{width:150px;float:left;margin:auto 10px;}
    #col3{width:200px;float:left;}
    #col4 {width:100px;float:left;}
    #col1 div,#col2 div,#col3 div,#col4 div {border:1px solid #ccc;height:200px;margin-bottom:10px; padding:5px;}
    </style>

</head>
<body>
<input type="hidden" id="saveDrag" name="saveDrag" value="" />

    <input type="button" id="save" value="保存布局" onclick="saveStr();" />
    <div id="root">
        <div id="col1">
            <div id="col1_1">
                 <table width="100%" border="0" cellspacing="0" cellpadding="0">
            &n bsp;       <tr>
               ;          <td onmousedown="mouseDown(this);" class="td">
             & nbsp;              1</td>
             &nb sp;      </tr>
             &nbs p; </table>
            </div>
            <div id="col1_2">
                 <table width="100%" border="0" cellspacing="0" cellpadding="0">
            &n bsp;       <tr>
               ;          <td onmousedown="mouseDown(this);" class="td">
             & nbsp;              2</td>
             &nb sp;      </tr>
             &nbs p; </table>
            </div>
        </div>
        <div id="col2">
            <div id="col2_1">
                 <table width="100%" border="0" cellspacing="0" cellpadding="0">
            &n bsp;       <tr>
               ;          <td onmousedown="mouseDown(this);" class="td">
             & nbsp;              3</td>
             &nb sp;      </tr>
             &nbs p; </table>
            </div>
            <div id="col2_2">
                 <table width="100%" border="0" cellspacing="0" cellpadding="0">
            &n bsp;       <tr>
               ;          <td onmousedown="mouseDown(this);" class="td">
             & nbsp;              4</td>
             &nb sp;      </tr>
             &nbs p; </table>
            </div>
            <div id="col2_3">
                 <table width="100%" border="0" cellspacing="0" cellpadding="0">
            &n bsp;       <tr>
               ;          <td onmousedown="mouseDown(this);" class="td">
             & nbsp;              5</td>
             &nb sp;      </tr>
             &nbs p; </table>
            </div>
        </div>
        <div id="col3">
            <div id="col3_1">
                 <table width="100%" border="0" cellspacing="0" cellpadding="0">
            &n bsp;       <tr>
               ;          <td onmousedown="mouseDown(this);" class="td">
             & nbsp;              6</td>
             &nb sp;      </tr>
             &nbs p; </table>
            </div>
            <div id="col3_2">
                 <table width="100%" border="0" cellspacing="0" cellpadding="0">
            &n bsp;       <tr>
               ;          <td onmousedown="mouseDown(this);" class="td">
             & nbsp;              7</td>
             &nb sp;      </tr>
             &nbs p; </table>
            </div>
        </div>
        <div id="col4">
            <div id="col4_1">
                 <table width="100%" border="0" cellspacing="0" cellpadding="0">
            &n bsp;       <tr>
               ;          <td onmousedown="mouseDown(this);" class="td">
             & nbsp;              8</td>
             &nb sp;      </tr>
             &nbs p; </table>
            </div>
            <div id="col4_2">
                 <table width="100%" border="0" cellspacing="0" cellpadding="0">
            &n bsp;       <tr>
               ;          <td onmousedown="mouseDown(this);" class="td">
             & nbsp;              9</td>
             &nb sp;      </tr>
             &nbs p; </table>
            </div>
        </div>
    </div>
</body>
</html>
|||

---------------拖拽DIV和保存需要用到的2个JS------------------------
--------------- dragdiv.js-------------
var dragObject = null;
var mouseOffset = null;
var tmpDiv=null;
var eleDivW=null;
var dragDiv=null;
var dragDivLen=null;
var cook = new CookieClass();
cook.expires =1;
var nl=0;
var dragNull=[];
var DragContainer= ["col1","col2","col3","col4"];
//-------------------------------------------------------
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
/*
数据库
*/
function getData(colID,divID){
var dataArray=divID.split ("Qin_Mi");
var cookie=new Object();
for(var i=0;i<dataArray.length;i++) {
var arr=dataArray[i].split("=");
if(arr[0]==colID)return unescape(arr[1]);
}
return "";
}

/*
Cookie
*/
this.getCookie=function(name){
var cookieArray=document.cookie.split("; ");
var cookie=new Object();
for(var i=0;i<cookieArray.length;i++){
var arr=cookieArray[i].split ("=");
if(arr[0]==name)return unescape(arr[1]);
}
return "";
}

this.deleteCookie=function(name){
var date=new Date();
var ms= 1 * 1000;
date.setTime(date.getTime() - ms);
var str = name+"=no; expires=" + date.toGMTString();
document.cookie=str;
}

this.showCookie=function(){
alert(unescape(document.cookie));
}
}

//鼠标位置
function mouseCoords(ev){
if(ev.pageX || ev.pageY) {
  return {x:ev.pageX, y:ev.pageY};
}
return {
  x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
  y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}

function getMouseOffset(target, ev){
var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function mouseDown(elem){
ev=getEvent();
dragObject = elem.parentNode.parentNode.parentNode;
dragDiv=dragObject.parentNode.parentNode;
&nbs p;dragDivLen=dragDiv.getElementsByTagName("div").length;
mouseOffset = getMouseOffset (dragObject, ev);
eleDivW=dragObject.parentNode.offsetWidth;
dragObject.parentNode.style.bor der="1px dotted #ccc";
return false;
}

-------------ajax.js--------
$=function(o){return typeof(o)=="string"? document.getElementById(o):o};
function creatXmlObj(){
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
}
else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}

function showStr(){
creatXmlObj();
xmlHttp.open("GET","DragTest.aspx? flag=show",false);
xmlHttp.send(null);
$("saveDrag").value=xmlHttp.responseText;
}

|||

----------------C#保存与显示布局的代码-----------------------
------------DragTest.aspx.cs -------------
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using System.Configuration;

public partial class DragTest : System.Web.UI.Page
{
    string connstr = ConfigurationManager.AppSettings["ConnectionString"];
    SqlConnection conn;
    protected void Page_Load(object sender, EventArgs e)
    {
        conn = new SqlConnection (connstr);
        if (Request.QueryString["flag"] == "save" && !String.IsNullOrEmpty(Request.QueryString["str"]))
        {
            UpdateDrag ();
        }
        else if (Request.QueryString["flag"] == "show")
        {
            ShowDrag ();
        }
    }
    public void UpdateDrag()
    {
        conn.Open();
        string updateSql = "Update DragSave Set DragInfo='" + Request.QueryString["str"] + "'";
        SqlCommand comm = new SqlCommand(updateSql, conn);
        comm.CommandText = updateSql;
        comm.ExecuteNonQuery ();
        conn.Close ();
        Response.Write ("ok");
        Response.End();
    }
    public void ShowDrag()
    {
        conn.Open ();
        string sql = "Select * From DragSave";
        SqlCommand comm = new SqlCommand(sql, conn);
        SqlDataReader sdr = comm.ExecuteReader ();
        string dragInfo = "";
        if (sdr.Read())
        {
            dragInfo = sdr ["DragInfo"].ToString();
        }
        if (!sdr.IsClosed) { sdr.Close(); }
        conn.Close ();
        Response.Write (dragInfo);
        Response.End();
    }
}

posted on 2009-09-26 10:52 冷月孤峰阅读(935) 评论(0) 收藏举报