编程学习

#TITLE=ASP常用语法及函数
#INFO
ASP常用de一些语法及自定义函数
#SORT=n

#T= ===ASP常用语法===
#T=============================
#T=数据库相关
#T=　连接ACCESS数据库
<%
Dim DBName,Conn
DBName”^!” ‘定义数据库路径及名称
SET Conn = Server.CreateObject(”ADODB.Connection”)
Conn.Open “Provider=Microsoft.Jet.OLEDB.4.0;Data Source=” & Server.MapPath(DBName)
%>

#T=　连接MS SQL数据库
<%
Dim Conn
SET Conn=Server.CreateObject(”ADODB.connection”)
Conn.Open “PROVIDER=SQLOLEDB;DATA SOURCE=SQL服务器名称或IP地址;UID=数据库登录帐号;PWD=数据库密码;DATABASE=数据库名称”
%>

#T=　建立记录集
SET ^!=Server.CreateObject(”ADODB.recordset”)

#T=　执行SQL命令
RS.Open SQL,conn,1,1

#T=　执行SQL命令
Conn.Execute(”^!”)

#T=　RS直接执行SQL命令
SET RS = Conn.Execute(”^!”)

#T=　关闭记录集
RS.CLOSE
SET RS=NOTHING

#T=　关闭数据库
Conn.Close
SET Conn=Nothing

#T=============================
#T=ServerVariables相关
#T=　取上一页地址
Request.ServerVariables(”HTTP_REFERER”)

#T=　取服务器de名称1
Request.ServerVariables(”SERVER_NAME”)

#T=　取服务器de名称2
Request.ServerVariables(”HTTP_HOST”)

#T=　取服务器IP
Request.ServerVariables(”LOCAL_ADDR”)

#T=　取用户IP
Request.ServerVariables(”Remote_Host”)

#T=　取用户真实IP1
Request.serverVariables(”REMOTE_ADDR”)

#T=　取用户真实IP函数
Function GetRealIP()
GetRealIP = Request.ServerVariables(”HTTP_X_FORWARDED_FOR”)
IF(GetRealIP = “”)THEN GetRealIP = Request.ServerVariables(”REMOTE_ADDR”)
End Function

#T=　取服务器端口
Request.ServerVariables(”SERVER_PORT”)

#T=　取服务器操作系统
Request.ServerVariables(”OS”)

#T=　取服务器de绝对路径
Request.ServerVariables(”APPL_PHYSICAL_PATH”)

#T=　取本文件de绝对路径1
Requet.ServerVariables(”PATH_TRANSLATED”)

#T=　取本文件de绝对路径2
Server.mappath(Request.ServerVariables(”SCRIPT_NAME”))

#T=　取本文件de相对路径1
Request.ServerVariables(”URL”)

#T=　取本文件de相对路径2
Request.ServerVariables(”SCRIPT_NAME”)

#T=　取本文件de相对路径3
Request.ServerVariables(”PATH_INFO”)

#T=　取地址栏后de参数
Request.ServerVariables(”QUERY_STRING”)

#T=　取服务器系统信息
Request.ServerVariables(”HTTP_USER_AGENT”)

#T=　服务器组件检测
<%
Function IsObjInstalled(strClassString)
On Error Resume Next
IsObjInstalled = False
Err = 0
Dim xTestObj
SET xTestObj = Server.CreateObject(strClassString)
IF(0 = Err)THEN IsObjInstalled = True
SET xTestObj = Nothing
Err = 0
End Function
‘IF(IsObjInstalled(”Persits.Upload”)=True)THEN
‘ Response.Write “支持AspUpload组件”
‘ELSE
‘ Response.Write “不支持AspUpload组件”
‘END IF
%>

#T=　取客户端语言环境
^!Request.ServerVariables(”HTTP_ACCEPT_LANGUAGE”)

#T=　取客户端信息:HTTP_USER_AGENT
^!Request.ServerVariables(”HTTP_USER_AGENT”)

#T=　取表单(Form)值元素值
Request.Form(”^!”)

#T=　取URL传递de值
Request.QueryString(”^!”)

#T=　取完整URL地址
Function GetUrl()
GetUrl=”http://”&Request.ServerVariables(”SERVER_N … .ServerVariables(”URL”)
IF(Request.ServerVariables(”QUERY_STRING”)<>”")THEN GetURL=GetUrl&”?”& Request.ServerVariables(”QUERY_STRING”)
End Function

#T=============================
#T=自定义函数
#T=　过滤HTML字符
<%
‘过滤HTML字符函数
Function HTMLEncode(str)
IF(str <> “”)THEN
str = Replace(str, “&”, “&”)
str = Replace(str, “>”, “>”)
str = Replace(str, “<”, “<”)
str = Replace(str, Chr(32), ” “)
str = Replace(str, Chr(9), ” “)
str = Replace(str, Chr(34), “"”)
str = Replace(str, Chr(39), “'”)
str = Replace(str, Chr(13), “”)
str = Replace(str, Chr(10) & Chr(10), “</P><P>”)
str = Replace(str, Chr(10), “<BR>”)
str = Replace(str, Chr(255), ” “)
END IF
HTMLEncode = str
End Function
%>

#T=　检测上页是否从本站提交
<%
‘检测上页是否从本站提交
‘返回:True,False
‘===============================================================
Function IsSelfRefer()
Dim sHttp_Referer, sServer_Name
sHttp_Referer = CStr(Request.ServerVariables(”HTTP_REFERER”))
sServer_Name = CStr(Request.ServerVariables(”SERVER_NAME”))
IF(Mid(sHttp_Referer, 8, Len(sServer_Name)) = sServer_Name)THEN
IsSelfRefer = True
ELSE
IsSelfRefer = False
END IF
End Function
%>

#T=　清除所有HTML标记
<%
‘清除HTML标记
Function stripHTML(htmlStr)
Dim regEx
SET regEx = New Regexp
regEx.IgnoreCase = True
regEx.Global = True
regEx.Pattern = “<. ?>”
htmlStr = regEx.Replace(htmlStr,”")
htmlStr = Replace(htmlStr, “<”,”<”)
htmlStr = Replace(htmlStr, “>”,”>”)
htmlStr = Replace(htmlStr,chr(10),”")
htmlStr = Replace(htmlStr,chr(13),”")
stripHTML = htmlStr
SET regEx = Nothing
End Function

%>

#T=　取字符串长度
<%
‘求字符串长度函数
Function GetLength(str)
Dim Length
For i=1 to Len(str)
IF(Asc(Mid(str,i,1))<0 or Asc(Mid(str,i,1))>256)THEN
Length=Length 2
ELSE
Length=Length 1
END IF
Next
GetLength=Length
End Function
%>

#T=　截取指定长度字符串
<%
‘截取指定长度de字符串,多余de用…代替
Function StrLeft(str,strlen)
IF(str = “”)THEN
StrLeft = “”
Exit Function
END IF
Dim l,t,c,i
str = Replace(Replace(Replace(Replace(str,” “,” “),”"”,chr(34)),”>”,”>”),”<”,”<”)
l=len(str)
t=0
For i=1 to l
c=Abs(Asc(Mid(str,i,1)))
IF(c>255)THEN
t=t 2
ELSE
t=t 1
END IF
IF(t>strlen)THEN
StrLeft = left(str,i) & “…”
Exit For
ELSE
StrLeft = str
END IF
Next
StrLeft = Replace(Replace(Replace(Replace(StrLeft,” “,” “),chr(34),”"”),”>”,”>”),”<”,”<”)
End Function
%>

#T=　获取安全de提交参数
<%
‘===============================================================
‘SQL Injection Check
‘函数功能:过滤字符参数中de单引号,对于数字参数进行判断,如果不是数值类型,则赋值0
‘参数意义:str —- 要过滤de参数
’strType —- 参数类型,分为字符型和数字型,字符型为”s”,数字型为”i”
‘===============================================================
Function CheckStr(str,strType)
Dim strTmp
strTmp = “”
IF(strType =”s”)THEN
strTmp = Replace(Trim(str),”‘”,”””)
ELSEIF(strType=”i”)THEN
IF(IsNumeric(str)=False)THEN str=False
strTmp = str
ELSE
strTmp = str
End IF
CheckStr= strTmp
End Function
%>

#T=　过滤不良字符(BadWord)
<%
‘过滤不良字符(BadWords)
Function ChkBadWords(fString)
Dim BadWords,bwords,i
BadWords = “我操|操您|操他|您妈de|他妈de|狗|杂种|屄|屌|王八|强奸|做爱|处女|泽民|法轮|法伦|洪志|法輪”
IF(Not(IsNull(BadWords) or IsNull(fString)))THEN
bwords = Split(BadWords, “|”)
For i = 0 to UBound(bwords)
fString = Replace(fString, bwords(i), string(Len(bwords(i)),”*”))
Next
ChkBadWords = fString
END IF
End Function
%>

#T=　生成随机自定义长度密码
<%
‘生成随机自定义长度密码
Function makePassword(maxLen)
Dim strNewPass
Dim whatsNext, upper, lower, intCounter
Randomize
For intCounter = 1 To maxLen
whatsNext = Int((1 - 0 1) * Rnd 0)
IF(whatsNext = 0)THEN
‘character
upper = 90
lower = 65
ELSE
upper = 57
lower = 48
END IF
strNewPass = strNewPass & Chr(Int((upper - lower 1) * Rnd lower))
Next
makePassword = strNewPass
End Function
‘Response.Write makepassword(8)
%>

#T=　填入Textarea时保持格式inHTML
<%
‘===============================================================
‘去除Html格式,用于从数据库中取出值填入输入框时
‘注意:value=”?”这边一定要用双引号
‘===============================================================
Function inHTML(str)
Dim sTemp
sTemp = str
inHTML = “”
If IsNull(sTemp) = True Then
Exit Function
End If
sTemp = Replace(sTemp, “&”, “&”)
sTemp = Replace(sTemp, “<br>”,chr(13))
sTemp = Replace(sTemp, “<”, “<”)
sTemp = Replace(sTemp, “>”, “>”)
sTemp = Replace(sTemp, “"”, Chr(34))
inHTML = sTemp
End Function
%>

#T=　正则表表达式验证函数
<%
‘正则表表达式验证函数 patrn-正则表达式　strng-需要验证de字符串
‘===============================================================
Function RegExpTest(patrn, strng)
Dim regEx, retVal ‘ 建立变量.
SET regEx = New RegExp ‘ 建立正则表达式.
regEx.Pattern = patrn ‘ 设置模式.
regEx.IgnoreCase = False ‘ 设置是否区分大小写.
retVal = regEx.Test(strng) ‘ 执行搜索测试.
RegExpTest = retVal ‘返回值,不符合就返回false,符合为true
SET regEx = NOTHING
End Function
%>

Function StreamBytesToBstr(strBody, CodeBase)
Dim objStream
SET objStream = Server.CreateObject(”Adodb.Stream”)
With objStream
.Type = 1
.Mode = 3
.Open
.Write strBody
.Position = 0
.Type = 2
.Charset = CodeBase
StreamBytesToBstr = .ReadText
.Close
End With
SET objStream = Nothing
End Function
%>

点击运行可以看到效果:<br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>“><br /> <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>“><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </p> <p></head><br /> <body> </p> <h1>宝儿dezQuery库选择器简单原型</h1> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul class="classTest"> <li class="classTest"></li> <li></li> <li></li> <li></li> <li></li> </ul> <p><script type="text/javascript"> var zQuery=function(ele,tagName,className){ if(!arr){var arr=new Array()} var elem=typeof(ele)=="object"?ele:document.getElementById(ele); if(!tagName){ return elem; }else{ if(elem.constructor!=Array){ var tags=elem.all&&!window.opera?tagName=="*"?elem.all:elem.all.tags(tagName):elem.getElementsByTagName(tagName); if(!className){ for(var i=0, l=tags.length; i<l; i ) arr.push(tags[i]); }else{ for(var i=0, l=tags.length; i<l; i ) if(RegExp("(^|\\s )" className "($|\\s )").test(tags[i].className)) arr.push(tags[i]); } }else{ for(var i=0, l=elem.length; i<l; i ){ arr=arr.concat(zQuery(elem[i],tagName,className)); } } } return arr; } var $=zQuery; alert( $("idTest").id ); alert( $("idTest","li").length); alert( $(document,"div").length ); alert( $( $(document,"div"),"ul").length ); alert( $( $( $(document,"div"),"ul"),"li").length ); alert( $(document,"div","classTest").length ); alert( $( $(document,"div","classTest"),"ul","classTest").length ); alert( $( $( $(document,"div","classTest"),"ul","classTest"),"li","classTest").length ); </script><br /> </body><br /> </html> </p> <p>
[Ctrl A 全选 提示:您可先修改部分相关代码,再按运行]

Array.prototype.del = function(n)
{
if (n<0) return this;
return this.slice(0,n).concat(this.slice(n 1,this.length));
}
// 数组洗牌
Array.prototype.random = function()
{
var nr=[], me=this, t;
while(me.length>0)
{
nr[nr.length] = me[t = Math.floor(Math.random() * me.length)];
me = me.del(t);
}
return nr;
}
// 数字数组排序
Array.prototype.sortNum = function(f)
{
if (!f) f=0;
if (f==1) return this.sort(function(a,b){return b-a;});
return this.sort(function(a,b){return a-b;});
}
// 获得数字数组de最大项
Array.prototype.getMax = function()
{
return this.sortNum(1)[0];
}
// 获得数字数组de最小项
Array.prototype.getMin = function()
{
return this.sortNum(0)[0];
}
// 数组第一次出现指定元素值de位置
Array.prototype.indexOf = function(o)
{
for (var i=0; i<this.length; i ) if (this[i]==o) return i;
return -1;
}
// 移除数组中重复de项
Array.prototype.removeRepeat=function()
{
this.sort();
var rs = [];
var cr = false;
for (var i=0; i<this.length; i )
{
if (!cr) cr = this[i];
else if (cr==this[i]) rs[rs.length] = i;
else cr = this[i];
}
var re = this;
for (var i=rs.length-1; i>=0; i–) re = re.del(rs[i]);
return re;
}
例子:
var arr=["ni","wo","ta"];
删除数组中de“wo”
var newArr=arr.del(1);
返回数组中“me”第一次出现de位置,若没有就返回-1
var strPos=arr.indexOf(”me”);

1.判断select选项中 是否存在Value=”paraValue”deItem
function jsSelectIsExitItem(objSelect, objItemValue) {
var isExit = false;
for (var i = 0; i < objSelect.options.length; i ) {
if (objSelect.options[i].value == objItemValue) {
isExit = true;
break;
}
}
return isExit;
}
2.向select选项中 加入一个Item
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
alert(”该ItemdeValue值已经存在”);
} else {
var varItem = new Option(objItemText, objItemValue);
objSelect.options.add(varItem);
alert(”成功加入”);
}
}
3.从select选项中 删除一个Item
function jsRemoveItemFromSelect(objSelect, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i ) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options.remove(i);
break;
}
}
alert(”成功删除”);
} else {
alert(”该select中 不存在该项”);
}
}

4.删除select中选中de项
function jsRemoveSelectedItemFromSelect(objSelect) {
var length = objSelect.options.length - 1;
for(var i = length; i >= 0; i–){
if(objSelect[i].selected == true){
objSelect.options[i] = null;
}
}
}
5.修改select选项中 value=”paraValue”detext为”paraText”
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i ) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options[i].text = objItemText;
break;
}
}
alert(”成功修改”);
} else {
alert(”该select中 不存在该项”);
}
}
6.设置select中text=”paraText”de第一个Item为选中
function jsSelectItemByValue(objSelect, objItemText) {
//判断是否存在
var isExit = false;
for (var i = 0; i < objSelect.options.length; i ) {
if (objSelect.options[i].text == objItemText) {
objSelect.options[i].selected = true;
isExit = true;
break;
}
}
//Show出结果
if (isExit) {
alert(”成功选中”);
} else {
alert(”该select中 不存在该项”);
}
}
7.设置select中value=”paraValue”deItem为选中
document.all.objSelect.value = objItemValue;
8.得到selectde当前选中项devalue
var currSelectValue = document.all.objSelect.value;
9.得到selectde当前选中项detext
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
10.得到selectde当前选中项deIndex
var currSelectIndex = document.all.objSelect.selectedIndex;
11.清空selectde项
document.all.objSelect.options.length = 0;
上面de是从网上搜集de,现在看看根据上面de内容做de
点击运行可以看到效果:<br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </p> <p><script language="javascript" type="text/javascript"> </p> <p>function vtOption(){ var s1=document.getElementById("select1"); var sV=s1.options[s1.selectedIndex].value; var sT=s1.options[s1.selectedIndex].text; alert(sV “\n” sT); } </p> <p>function addOption1(){ var s1=document.getElementById(”select1″); var newOp1=new Option; newOp1.value=”3″; newOp1.text=”这是3″; var newOp2=new Option; newOp2.value=”4″; newOp2.text=”这是4″; s1.add(newOp1); s1.add(newOp2); } </p> <p>function addOption2(){ var s1=document.getElementById(”select1″); for(var i=3;i<5;i ){ var newOp1=new Option("这是" i,i); //var newOp1=new Option; //newOp1.value=i; //newOp1.text="这是" i; s1.add(newOp1); } } </p> <p>function addOption3(){ var s1=document.getElementById("select1"); s1.options.length=0;//清除以前de选项 for(var i=3;i<7;i ){ var newOp1=new Option("这是" i,i); //var newOp1=new Option; //newOp1.value=i; //newOp1.text="这是" i; s1.add(newOp1); } } </p> <p>function remOption(){ var s1=document.getElementById("select1"); for(var i=s1.options.length;i>=0;i–){ s1.options.remove(i); } } </p> <p>function remOptionSelected(){ var s1=document.getElementById(”select1″); var i=s1.selectedIndex; //alert(i); s1.options.remove(i); } </script><br /> </head> </p> <p><body> </p> <select name="select" id="select1"> <option value="1">这是1</option><br /> <option value="2">这是2</option><br /> </select> <p><a href="javascript:vtOption()">取值</a> <a href="javascript:addOption1()">增加1</a> <a href="javascript:addOption2()">增加2</a> <a href="javascript:addOption3()">增加3</a> <a href="javascript:remOption()">删除选项</a><br /> <a href="javascript:remOptionSelected()">删除选取选项</a><br /> </body><br /> </html> </p> <p>
[Ctrl A 全选 提示:您可先修改部分相关代码,再按运行]

//获取字符数组
String.prototype.ToCharArray=function()
{
return this.split(”");
}
//获取N个相同de字符串
String.prototype.Repeat=function(num)
{
var tmpArr=[];
for(var i=0;i<num;i ) tmpArr.push(this);
return tmpArr.join(”");
}
//逆序
String.prototype.Reverse=function()
{
return this.split(”").reverse().join(”");
}
//测试是否是数字
String.prototype.IsNumeric=function()
{
var tmpFloat=parseFloat(this);
if(isNaN(tmpFloat)) return false;
var tmpLen=this.length-tmpFloat.toString().length;
return tmpFloat “0″.Repeat(tmpLen)==this;
}
//测试是否是整数
String.prototype.IsInt=function()
{
if(this==”NaN”) return false;
return this==parseInt(this).toString();
}
// 合并多个空白为一个空白
String.prototype.resetBlank = function()
{
return this.replace(/s /g,” “);
}
// 除去左边空白
String.prototype.LTrim = function()
{
return this.replace(/^s /g,”");
}
// 除去右边空白
String.prototype.RTrim = function()
{
return this.replace(/s $/g,”");
}
// 除去两边空白
String.prototype.trim = function()
{
return this.replace(/(^s )|(s $)/g,”");
}
// 保留数字
String.prototype.getNum = function()
{
return this.replace(/[^d]/g,”");
}
// 保留字母
String.prototype.getEn = function()
{
return this.replace(/[^A-Za-z]/g,”");
}
// 保留中文
String.prototype.getCn = function()
{
return this.replace(/[^u4e00-u9fa5uf900-ufa2d]/g,”");
}
// 得到字节长度
String.prototype.getRealLength = function()
{
return this.replace(/[^x00-xff]/g,”–”).length;
}
// 从左截取指定长度de字串
String.prototype.left = function(n)
{
return this.slice(0,n);
}
// 从右截取指定长度de字串
String.prototype.right = function(n)
{
return this.slice(this.length-n);
}
// HTML编码
String.prototype.HTMLEncode = function()
{
var re = this;
var q1 = [/x26/g,/x3C/g,/x3E/g,/x20/g];
var q2 = ["&","<",">"," "];
for(var i=0;i<q1.length;i )
re = re.replace(q1[i],q2[i]);
return re;
}
// Unicode转化
String.prototype.ascW = function()
{
var strText = “”;
for (var i=0; i<this.length; i ) strText = “&#” this.charCodeAt(i) “;”;
return strText;
}

但是是XML字符串,则在两种浏览器下就会有所不同,IE下可以直接使用LoadXML方法解析XML字符串,而在FF下则要使用DOMParser 对象deparseFromString() 方法即
var oParser=new DOMParser();
xmlDoc=oParser.parseFromString(xmlStr,”text/xml”);
为了在两种浏览器中能通用,我想到了javascritpde发生异常de处理方式,就是try…catch…
[复制此相关代码]CODE:
function toXML(strxml){
try{
xmlDoc = new ActiveXObject(”Microsoft.XMLDOM”);
xmlDoc.loadXML(strxml);
}
catch(e){
var oParser=new DOMParser();
xmlDoc=oParser.parseFromString(strxml,”text/xml”);
}
return xmlDoc;
}

点击运行可以看到效果:<br /> <script type="text/javascript"> function toXML(strxml){ try{ var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); //var xmlDoc = new ActiveXObject("Msxml2.DOMDocument"); xmlDoc.loadXML(strxml); } catch(e){ var oParser=new DOMParser(); xmlDoc=oParser.parseFromString(strxml,"text/xml"); } return xmlDoc; } str="<node1><node1_1>1400</node1_1><node1_2 id='n1_2'>Default.htm</node1_2></node1>” var xmlObj=toXML(str); alert(xmlObj.childNodes[0].firstChild.firstChild.nodeValue); </script><br />
[Ctrl A 全选 提示:您可先修改部分相关代码,再按运行]
看,不管在ie还是ff中都弹出了1400吧!!
[复制此相关代码]CODE:
function FormatToXml(strXml){
var isIE = function(){
var IE = /msie/i.test(navigator.userAgent);
return IE;
}
var Exc = function(){
var XmlDoc = null;
if (isIE())
{
XmlDoc = new ActiveXObject(”Microsoft.XMLDOM”);
XmlDoc.loadXML(strXml);
}else{
//FireFox2.0、Safari2.0
XmlDoc = (new DOMParser()).parseFromString(strXml, “text/xml”);
}
return XmlDoc;
}
return Exc();
}

功能是一样de,都是为了在ie和ff中处理xml字符串de解析问题.不过在无忧上有些人说xml字符串要有<?xml version=”1.0″ encoding=”gb2312″?>,可我测试后若有xml version=”1.0″ encoding=”gb2312″?>,解析结果不一致,所以我上面de例子没有加这些字符.

点击运行可以看到效果:</p> <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </p> <p><script type="text/javascript"> var zQuery=function(ele,tagName,className){ //核心对象 if ( window == this ) return new zQuery(ele,tagName,className); if(!arr){var arr=new Array;} if(ele){ if(ele.constructor!=zQuery){ var elem=typeof(ele)=="object"?ele:document.getElementById(ele); if(!tagName){ arr.push(elem); }else{ var tags=elem.all&&!window.opera?tagName=="*"?elem.all:elem.all.tags(tagName):elem.getElementsByTagName(tagName); if(!className){ for(var i=0, l=tags.length; i<l; i ){ arr.push(tags[i]); } }else{ var reClassName=RegExp("(^|\\s )" className "($|\\s )"); for(var i=0, l=tags.length; i<l; i ){ if(reClassName.test(tags[i].className)){ arr.push(tags[i]); } } } } }else{ for(var i=0, l=ele.length; i<l; i ){ arr=arr.concat(Array.prototype.slice.call(zQuery(ele[i],tagName,className))); } } } return this.setArray(arr); //借鉴jQuery方法,这里返回zQuery对象原型(一个DOM集合对象),不再是返回单纯deDOM数组对象 } zQuery.prototype.setArray = function( arr ) { this.length = 0; Array.prototype.push.apply( this, arr ); //这里de概念非常重要,zQuery方法对象执行了Array原型depush()方法 return this; } zQuery.fn=zQuery.prototype; var $=zQuery; </p> <p>//取selectde绝对位置、高、宽 function Offset(obj){ var t = obj.offsetTop; var l = obj.offsetLeft; var w = obj.offsetWidth; var h = obj.offsetHeight-2; //var h=obj.style.height; while(obj=obj.offsetParent) { t =obj.offsetTop; l =obj.offsetLeft; } return { top : t, left : l, width : w, height : h } } //模拟select function instSelect(obj){ var offSet=Offset(obj); obj.style.display="none"; var sDiv=document.createElement("div"); sDiv.id="div" obj.name; sDiv.className="divSlt"; sDiv.style.width=offSet.width "px"; //sDiv.style.height=offSet.height "px"; sDiv.style.left=offSet.left "px"; sDiv.style.top=offSet.top "px"; document.body.appendChild(sDiv); var sSpan=document.createElement("span"); var spanId=obj.options[obj.selectedIndex].value; var spanText=obj.options[obj.selectedIndex].text; sSpan.id=spanId; sSpan.style.lineHeight=offSet.height "px"; sTxt=document.createTextNode(spanText); sSpan.appendChild(sTxt); sDiv.appendChild(sSpan); sSpan.onclick=function(){ if($("div" obj.name,"ul").length==0){ var sUl=document.createElement("ul"); sDiv.appendChild(sUl); var optLen=obj.options.length; var tmp=document.createDocumentFragment(); for(var j=0;j<optLen;j ){ var sltVal=obj.options[j].value; var sltTxt=obj.options[j].text; var sLi=document.createElement("li"); sLi.id=sltVal; sLi.appendChild(document.createTextNode(sltTxt)); sLi.onmouseover=function(){ this.style.background="#cccccc"; this.style.color="white"; } sLi.onmouseout=function(){ this.style.background="white"; this.style.color="black"; } sLi.onclick=function(){ sSpan.innerHTML=this.innerHTML; obj.value=this.id; sUl.style.display="none"; } tmp.appendChild(sLi); } sUl.appendChild(tmp); if(optLen>3){ sUl.style.overflowY=”scroll”; sUl.style.height=”100px”; } } else{ if($(”div” obj.name,”ul”)[0].style.display==”none”) $(”div” obj.name,”ul”)[0].style.display=”block”; else $(”div” obj.name,”ul”)[0].style.display=”none”; } } } //取得slectde个数,并且对每个select执行函数 function initSelect(){ var slt=$(document,”select”); var sltLen=slt.length; for(var i=0;i<sltLen;i ){ instSelect(slt[i]); } } </p> <p>window.onload=initSelect; document.onclick=function(){ var evt=getEvent(); var element=evt.srcElement || evt.target; var s=$(document,"select"); if((element.parentNode.parentNode==null||element.parentNode.parentNode.className!="divSlt")&&element.nodeName!="SPAN"){ for (var i=0; i<s.length; i ) { if(!$("div" s[i].name,"ul")[0]) continue; $("div" s[i].name,"ul")[0].style.display="none"; } } } function getEvent(){ //同时兼容ie和ffde写法 if(document.all) return window.event; func=getEvent.caller; while(func!=null){ var arg0=func.arguments[0]; if(arg0){ if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){ return arg0; } } func=func.caller; } return null; } </script> </p> <style type="text/css"> select{ height:20px; width:150px; } .divSlt{ position:absolute; font-size:12px; } .divSlt span{ display:block; width:100%; border:1px solid #999999; background:url(down.gif) no-repeat right center; text-indent:6px; cursor:pointer; } .divSlt ul{ display:block; background-color:#FFFFFF; width:100%; border:1px solid #999999; border-top:0px; margin:0px; padding:0px; list-style:none; } .divSlt ul li{ text-indent:5px; height:20px; line-height:20px; cursor:pointer; } </style> <p></head> </p> <p><body> </p> <form id="form1" name="form1" method="post" action="rq.asp"> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="200" height="30"> </td> <td width="200" height="30"> </td> <td width="200" height="30"> </td> </tr> <tr> <td width="200" height="30"> </td> <td width="200" height="30"> </td> <td width="200" height="30"> <select name="slt1" id="slt1"> <option value="选项一" selected="selected">选项一</option><br /> <option value="选项二">选项二</option><br /> <option value="选项三">选项三</option><br /> <option value="选项四">选项四</option><br /> <option value="选项五">选项五</option><br /> <option value="选项六">选项六</option><br /> <option value="选项七">选项七</option><br /> </select> </td> </tr> <tr> <td width="200" height="30"> </td> <td width="200" height="30"> <select name="slt2" id="slt2"> <option value="选项一" selected="selected">选项一</option><br /> <option value="选项二">选项二</option><br /> <option value="选项三">选项三</option><br /> </select> </td> <td width="200" height="30"> </td> </tr> <tr> <td width="200" height="30"> </td> <td width="200" height="30"> <input type="submit" name="Submit" value="提交" /></td> <td width="200" height="30"> </td> </tr> </table> </form> <p></body><br /> </html> </p> <p>
[Ctrl A 全选 提示:您可先修改部分相关代码,再按运行]

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>下拉列表快速选择</title>

<script type=”text/javascript” language=”JavaScript”>
// 获取拼音首字母
function getPinYin(c) {
execScript(”tmp=asc(\”" c “\”)”, “vbscript”);
tmp = 65536 tmp;
if(tmp>=45217 && tmp<=45252) return “A”;
if(tmp>=45253 && tmp<=45760) return “B”;
if(tmp>=45761 && tmp<=46317) return “C”;
if(tmp>=46318 && tmp<=46825) return “D”;
if(tmp>=46826 && tmp<=47009) return “E”;
if(tmp>=47010 && tmp<=47296) return “F”;
if((tmp>=47297 && tmp<=47613) || (tmp == 63193)) return “G”;
if(tmp>=47614 && tmp<=48118) return “H”;
if(tmp>=48119 && tmp<=49061) return “J”;
if(tmp>=49062 && tmp<=49323) return “K”;
if(tmp>=49324 && tmp<=49895) return “L”;
if(tmp>=49896 && tmp<=50370) return “M”;
if(tmp>=50371 && tmp<=50613) return “N”;
if(tmp>=50614 && tmp<=50621) return “O”;
if(tmp>=50622 && tmp<=50905) return “P”;
if(tmp>=50906 && tmp<=51386) return “Q”;
if(tmp>=51387 && tmp<=51445) return “R”;
if(tmp>=51446 && tmp<=52217) return “S”;
if(tmp>=52218 && tmp<=52697) return “T”;
if(tmp>=52698 && tmp<=52979) return “W”;
if(tmp>=52980 && tmp<=53688) return “X”;
if(tmp>=53689 && tmp<=54480) return “Y”;
if(tmp>=54481 && tmp<=62289) return “Z”;
return c.charAt(0);
}
// select helper
SelectHelper = new function() {
// 初始化
this.init = function() {
document.attachEvent(”onkeypress”, function() {
var elm = event.srcElement;
if (elm.tagName == “SELECT”
&& elm.className.indexOf(”SelectHelper”) == -1) {
elm.className = “SelectHelper”;
elm.attachEvent(”onkeypress”, SelectHelper.getNextKeyItem);
elm.fireEvent(”onkeypress”, event);
}
});
}
// 获取选项文本de首字符
function getItemKeyChar(option) {
return option.text.charAt(0).toUpperCase();
}
// 查找并选中匹配de选项
this.getNextKeyItem = function() {
var elm = event.srcElement;
var index = elm.selectedIndex 1;
do {
if (index == elm.length) index = 0;
if (index == elm.selectedIndex) return false; // 未找到匹配de选项,则退出
} while (key2Char(event.keyCode) != getPinYin(getItemKeyChar(elm.options[index ])));
elm.selectedIndex = index - 1; // 选中匹配de选项
return false; // 取消原有de选择功能
}
};
/**
* 返回键盘事件对应de字母或数字
* a-z: 97 -> 122
* A-Z: 65 -> 90
* 0-9: 48 -> 57
*/
function key2Char(key) {
var s = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;
if (key >= 97 && key <= 122) return s.charAt(key - 97);
if (key >= 65 && key <= 90) return s.charAt(key - 65);
if (key >= 48 && key <= 57) return “” (key - 48);
return null;
}
SelectHelper.init();
</script>
</head>
<body>
比如,某选项de拼音首字母为”a”,只要按下键盘上de”a”,就可以快速选择该项.<br />
<select>
<OPTION selected value=北京>北京</OPTION>
<OPTION value=上海>上海</OPTION>
<OPTION value=天津>天津</OPTION>
<OPTION value=重庆>重庆</OPTION>
<OPTION value=河北>河北</OPTION>
<OPTION value=山西>山西</OPTION>
<OPTION value=内蒙古>内蒙古</OPTION>
<OPTION value=辽宁>辽宁</OPTION>
<OPTION value=32>32</OPTION>
<OPTION value=吉林>吉林</OPTION>
<OPTION value=黑龙江>黑龙江</OPTION>
<OPTION value=江苏>江苏</OPTION>
<OPTION value=浙江>浙江</OPTION>
<OPTION value=%&>&^</OPTION>
<OPTION value=安徽>安徽</OPTION>
<OPTION value=福建>福建</OPTION>
<OPTION value=北京>A1</OPTION>
<OPTION value=江西>江西</OPTION>
<OPTION value=山东>山东</OPTION>
<OPTION value=河南>河南</OPTION>
<OPTION value=湖北>湖北</OPTION>
<OPTION value=湖南>湖南</OPTION>
<OPTION value=31>31</OPTION>
<OPTION value=广东>广东</OPTION>
<OPTION value=广西>广西</OPTION>
<OPTION value=海南>海南</OPTION>
<OPTION value=北京>A2</OPTION>
<OPTION value=四川>四川</OPTION>
<OPTION value=贵州>贵州</OPTION>
<OPTION value=云南>云南</OPTION>
<OPTION value=西藏>西藏</OPTION>
<OPTION value=陕西>陕西</OPTION>
<OPTION value=甘肃>甘肃</OPTION>
<OPTION value=宁夏>宁夏</OPTION>
<OPTION value=青海>青海</OPTION>
<OPTION value=新疆>新疆</OPTION>
<OPTION value=香港>香港</OPTION>
<OPTION value=澳门>澳门</OPTION>
<OPTION value=台湾>台湾</OPTION>
<OPTION value=其它>其它</OPTION>
</SELECT>
<select>
<OPTION selected value=北京>北京</OPTION>
<OPTION value=上海>上海</OPTION>
<OPTION value=天津>天津</OPTION>
<OPTION value=重庆>重庆</OPTION>
<OPTION value=河北>河北</OPTION>
<OPTION value=山西>山西</OPTION>
<OPTION value=内蒙古>内蒙古</OPTION>
<OPTION value=辽宁>辽宁</OPTION>
<OPTION value=32>32</OPTION>
<OPTION value=吉林>吉林</OPTION>
<OPTION value=黑龙江>黑龙江</OPTION>
<OPTION value=江苏>江苏</OPTION>
<OPTION value=浙江>浙江</OPTION>
<OPTION value=%&>&^</OPTION>
<OPTION value=安徽>安徽</OPTION>
<OPTION value=福建>福建</OPTION>
<OPTION value=北京>A1</OPTION>
<OPTION value=江西>江西</OPTION>
<OPTION value=山东>山东</OPTION>
<OPTION value=河南>河南</OPTION>
<OPTION value=湖北>湖北</OPTION>
<OPTION value=湖南>湖南</OPTION>
<OPTION value=31>31</OPTION>
<OPTION value=广东>广东</OPTION>
<OPTION value=广西>广西</OPTION>
<OPTION value=海南>海南</OPTION>
<OPTION value=北京>A2</OPTION>
<OPTION value=四川>四川</OPTION>
<OPTION value=贵州>贵州</OPTION>
<OPTION value=云南>云南</OPTION>
<OPTION value=西藏>西藏</OPTION>
<OPTION value=陕西>陕西</OPTION>
<OPTION value=甘肃>甘肃</OPTION>
<OPTION value=宁夏>宁夏</OPTION>
<OPTION value=青海>青海</OPTION>
<OPTION value=新疆>新疆</OPTION>
<OPTION value=香港>香港</OPTION>
<OPTION value=澳门>澳门</OPTION>
<OPTION value=台湾>台湾</OPTION>
<OPTION value=其它>其它</OPTION>
</SELECT>
</body>
</html>
点击运行可以看到效果:<br /> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" language="JavaScript">// 获取拼音首字母function getPinYin(c) { execScript("tmp=asc(\"" c "\")", "vbscript"); tmp = 65536 tmp; if(tmp>=45217 && tmp<=45252) return "A"; if(tmp>=45253 && tmp<=45760) return "B"; if(tmp>=45761 && tmp<=46317) return "C"; if(tmp>=46318 && tmp<=46825) return "D"; if(tmp>=46826 && tmp<=47009) return "E"; if(tmp>=47010 && tmp<=47296) return "F"; if((tmp>=47297 && tmp<=47613) || (tmp == 63193)) return "G"; if(tmp>=47614 && tmp<=48118) return "H"; if(tmp>=48119 && tmp<=49061) return "J"; if(tmp>=49062 && tmp<=49323) return "K"; if(tmp>=49324 && tmp<=49895) return "L"; if(tmp>=49896 && tmp<=50370) return "M"; if(tmp>=50371 && tmp<=50613) return "N"; if(tmp>=50614 && tmp<=50621) return "O"; if(tmp>=50622 && tmp<=50905) return "P"; if(tmp>=50906 && tmp<=51386) return "Q"; if(tmp>=51387 && tmp<=51445) return "R"; if(tmp>=51446 && tmp<=52217) return "S"; if(tmp>=52218 && tmp<=52697) return "T"; if(tmp>=52698 && tmp<=52979) return "W"; if(tmp>=52980 && tmp<=53688) return "X"; if(tmp>=53689 && tmp<=54480) return "Y"; if(tmp>=54481 && tmp<=62289) return "Z"; return c.charAt(0);} // select helperSelectHelper = new function() { // 初始化 this.init = function() { document.attachEvent("onkeypress", function() { var elm = event.srcElement; if (elm.tagName == "SELECT" && elm.className.indexOf("SelectHelper") == -1) { elm.className = "SelectHelper"; elm.attachEvent("onkeypress", SelectHelper.getNextKeyItem); elm.fireEvent("onkeypress", event); } }); } // 获取选项文本de首字符 function getItemKeyChar(option) { return option.text.charAt(0).toUpperCase(); } // 查找并选中匹配de选项 this.getNextKeyItem = function() { var elm = event.srcElement; var index = elm.selectedIndex 1; do { if (index == elm.length) index = 0; if (index == elm.selectedIndex) return false; // 未找到匹配de选项,则退出 } while (key2Char(event.keyCode) != getPinYin(getItemKeyChar(elm.options[index ]))); elm.selectedIndex = index - 1; // 选中匹配de选项 return false; // 取消原有de选择功能 }};/** * 返回键盘事件对应de字母或数字 * a-z: 97 -> 122 * A-Z: 65 -> 90 * 0-9: 48 -> 57 */function key2Char(key) { var s = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”; if (key >= 97 && key <= 122) return s.charAt(key - 97); if (key >= 65 && key <= 90) return s.charAt(key - 65); if (key >= 48 && key <= 57) return "" (key - 48); return null;}SelectHelper.init();</script></head><body>比如,某选项de拼音首字母为”a”,只要按下键盘上de”a”,就可以快速选择该项.</p> <select><OPTION selected value=北京>北京</OPTION><OPTION value=上海>上海</OPTION><OPTION value=天津>天津</OPTION><OPTION value=重庆>重庆</OPTION><OPTION value=河北>河北</OPTION><OPTION value=山西>山西</OPTION><OPTION value=内蒙古>内蒙古</OPTION><OPTION value=辽宁>辽宁</OPTION><OPTION value=32>32</OPTION><OPTION value=吉林>吉林</OPTION><OPTION value=黑龙江>黑龙江</OPTION><OPTION value=江苏>江苏</OPTION><OPTION value=浙江>浙江</OPTION><OPTION value=%&>&^</OPTION><OPTION value=安徽>安徽</OPTION><OPTION value=福建>福建</OPTION><OPTION value=北京>A1</OPTION><OPTION value=江西>江西</OPTION><OPTION value=山东>山东</OPTION><OPTION value=河南>河南</OPTION><OPTION value=湖北>湖北</OPTION><OPTION value=湖南>湖南</OPTION><OPTION value=31>31</OPTION><OPTION value=广东>广东</OPTION><OPTION value=广西>广西</OPTION><OPTION value=海南>海南</OPTION><OPTION value=北京>A2</OPTION><OPTION value=四川>四川</OPTION><OPTION value=贵州>贵州</OPTION><OPTION value=云南>云南</OPTION><OPTION value=西藏>西藏</OPTION><OPTION value=陕西>陕西</OPTION><OPTION value=甘肃>甘肃</OPTION><OPTION value=宁夏>宁夏</OPTION><OPTION value=青海>青海</OPTION><OPTION value=新疆>新疆</OPTION><OPTION value=香港>香港</OPTION><OPTION value=澳门>澳门</OPTION><OPTION value=台湾>台湾</OPTION><OPTION value=其它>其它</OPTION></SELECT><br /> <select><OPTION selected value=北京>北京</OPTION><OPTION value=上海>上海</OPTION><OPTION value=天津>天津</OPTION><OPTION value=重庆>重庆</OPTION><OPTION value=河北>河北</OPTION><OPTION value=山西>山西</OPTION><OPTION value=内蒙古>内蒙古</OPTION><OPTION value=辽宁>辽宁</OPTION><OPTION value=32>32</OPTION><OPTION value=吉林>吉林</OPTION><OPTION value=黑龙江>黑龙江</OPTION><OPTION value=江苏>江苏</OPTION><OPTION value=浙江>浙江</OPTION><OPTION value=%&>&^</OPTION><OPTION value=安徽>安徽</OPTION><OPTION value=福建>福建</OPTION><OPTION value=北京>A1</OPTION><OPTION value=江西>江西</OPTION><OPTION value=山东>山东</OPTION><OPTION value=河南>河南</OPTION><OPTION value=湖北>湖北</OPTION><OPTION value=湖南>湖南</OPTION><OPTION value=31>31</OPTION><OPTION value=广东>广东</OPTION><OPTION value=广西>广西</OPTION><OPTION value=海南>海南</OPTION><OPTION value=北京>A2</OPTION><OPTION value=四川>四川</OPTION><OPTION value=贵州>贵州</OPTION><OPTION value=云南>云南</OPTION><OPTION value=西藏>西藏</OPTION><OPTION value=陕西>陕西</OPTION><OPTION value=甘肃>甘肃</OPTION><OPTION value=宁夏>宁夏</OPTION><OPTION value=青海>青海</OPTION><OPTION value=新疆>新疆</OPTION><OPTION value=香港>香港</OPTION><OPTION value=澳门>澳门</OPTION><OPTION value=台湾>台湾</OPTION><OPTION value=其它>其它</OPTION></SELECT></body></html><br />
[Ctrl A 全选 提示:您可先修改部分相关代码,再按运行]

好了,转入正文,在开始之前先介绍几个功能函数!
1.格式化事件de函数
[复制此相关代码]CODE:
function getEvent(){
//同时兼容ie和ffde写法
if(document.all) return window.event;
func=getEvent.caller;
while(func!=null){
var arg0=func.arguments[0];
if(arg0){
if((arg0.constructor==Event || arg0.constructor ==MouseEvent)
|| (typeof(arg0)==”object” && arg0.preventDefault && arg0.stopPropagation)){
return arg0;
}
}
func=func.caller;
}
return null;
}

2.取得鼠标de位置
[复制此相关代码]CODE:
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
};
}

3.得到元素de位置

[复制此相关代码]CODE:
function getPosition(ele){
var left = 0;
var top = 0;
while (ele.offsetParent){
left = ele.offsetLeft;
top = ele.offsetTop;
ele = ele.offsetParent;
}
left = ele.offsetLeft;
top = ele.offsetTop;
return {x:left, y:top};
}

首先,当然是写好初始布局de页面, 查看初始页面效果
一般拖动de元素是跟随鼠标de,我de思路是在把拖动de元素增加到一个position为absolutedediv中,
鼠标拖动de时候就让它de位置根据鼠标de坐标变化就可以了.所以在页面增加了个onload
[复制此相关代码]CODE:
var tmpDiv=null;//临时存放拖动对象dediv
window.onload=function(){
tmpDiv=document.createElement(”div”);
tmpDiv.style.cssText = ‘position:absolute;display:none;border:1px dotted #FFCC66;’;
document.body.appendChild(tmpDiv);
}

要实现拖动,首先触发de事件是mouseDown,所以我在拖动detablede一个td上绑定了onmousedown=”mouseDown(this);”
程序相关代码
[复制此相关代码]CODE:
var dragObject = null;//拖动de元素(table)
var mouseOffset = null;//鼠标de在拖动元素中de位置
var dragDiv=null;//拖动detable所在de列dediv
var eleDivW=null;//拖动detablede父节点(div)de高度
var dragDivLen=null;//拖动detable所在de列dediv中用来放置tablededivde个数
var DragContainer=["col1","col2","col3"];//用来实现列布局dedivdeid
//鼠标按下拖动de元素
function mouseDown(elem){
ev=getEvent();
dragObject = elem.parentNode.parentNode.parentNode;//被拖动detable
dragDiv=dragObject.parentNode.parentNode;
//拖动元素所在列里divde个数
dragDivLen=dragDiv.getElementsByTagName(”div”).length;
mouseOffset = getMouseOffset(dragObject, ev);
eleDivW=dragObject.parentNode.offsetWidth;
dragObject.parentNode.style.border=”1px dotted #FFCC66″;
return false;
}
//得到鼠标在拖动元素中de位置
function getMouseOffset(target, ev){
var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

剩下de当然就是鼠标移动拖动对象也能移动,用到de当然就是mouseMove咯,为简单我在document上绑定,
[复制此相关代码]CODE:
document.onmousemove = mouseMove;
function mouseMove(){
ev=getEvent();
var mousePos = mouseCoords(ev);
if(dragObject){
dragObject.parentNode.style.display=”none”;//设置放置被拖动tabledediv隐藏
//把拖动detable放到临时dediv中,并设置其坐标
for(var i=0; i<tmpDiv.childNodes.length; i ) tmpDiv.removeChild(tmpDiv.childNodes[i]);
tmpDiv.appendChild(dragObject.cloneNode(true));
tmpDiv.style.width=eleDivW “px”;
tmpDiv.style.backgroundColor=”#FFFFFF”;
tmpDiv.style.display=”block”;
tmpDiv.style.top = (mousePos.y - mouseOffset.y) “px”;
tmpDiv.style.left = (mousePos.x - mouseOffset.x) “px”;
}
return false;
}


有了mousemove当然少不了mouseup
[复制此相关代码]CODE:
document.onmouseup = mouseUp;
//鼠标松开
function mouseUp(){
if(dragObject){
if(dragObject.parentNode.style.display==”none”) dragObject.parentNode.style.display=”block”;
dragObject.parentNode.style.border=”1px solid #FFCC66″;
tmpDiv.style.display=”none”;
//这里是判断当列里有可拖动de元素时清除前面设置de高度值20px
for(var m=0;m<DragContainer.length;m ){
var colDiv=document.getElementById(DragContainer[m]);
var colDivLen=colDiv.getElementsByTagName(”div”).length
var colSty=colDiv.getAttribute(”style”);
if(colDivLen>0&&colSty!=null){
colDiv.removeAttribute(”style”);
break;
}
}
dragObject=null;
}
}


看看是不是可以拖动了,当您松开鼠标左键时,拖动de元素将回到原来de位置 查看拖动页面效果

最后要做de就是让拖动元素不回到原来de位置,而是回到我拖动de位置.
下面是mousemove事件de所有相关代码,看看注释就明白了
[复制此相关代码]CODE:
function mouseMove(){
ev=getEvent();
var mousePos = mouseCoords(ev);
if(dragObject){
//可拖动de个数为1,说明拖动后此列就没有拖动元素,为避免此列没有高度而不见,所以设置其高度为20px
if(dragDivLen==1) dragDiv.style.height=”20px”;
dragObject.parentNode.style.display=”none”;
//把拖动de元素加入到临时detmpDiv中,并设置tmpDiv坐标
for(var i=0; i<tmpDiv.childNodes.length; i ) tmpDiv.removeChild(tmpDiv.childNodes[i]);
tmpDiv.appendChild(dragObject.cloneNode(true));
tmpDiv.style.width=eleDivW “px”;
tmpDiv.style.backgroundColor=”#FFFFFF”;
tmpDiv.style.display=”block”;
tmpDiv.style.top = (mousePos.y - mouseOffset.y) “px”;
tmpDiv.style.left = (mousePos.x - mouseOffset.x) “px”;
//被拖动对象de中心点de坐标
var dragObjCntX=mousePos.x - mouseOffset.x parseInt(dragObject.offsetWidth)/2;
var dragObjCntY=mousePos.y - mouseOffset.y parseInt(dragObject.offsetHeight)/2;
//判断tmpDiv所在de列
var dragConLen=DragContainer.length;
for(var i=0;i<dragConLen;i ){
var curContainer=document.getElementById(DragContainer[i]);
var dcPos=getPosition(curContainer);
var dcPosMinX=dcPos.x;
var dcPosMinY=dcPos.y;
var dcWidth=curContainer.offsetWidth;
var dcHeight=curContainer.offsetHeight;
var dcPosMaxX=dcPosMinX dcWidth;
var dcPosMaxY=dcPosMinY dcHeight;
if(dragObjCntX>dcPosMinX&&dragObjCntX<dcPosMaxX&&dragObjCntY>dcPosMinY&&dragObjCntY<dcPosMaxY){
var activeContainer=curContainer;
break;
}
}
}
//判断tmpDiv在此列哪个区块范围内
if(activeContainer){
var beforNode=null;
var sDiv=activeContainer.getElementsByTagName(”div”)
var acChiLen=sDiv.length;
for(j=acChiLen-1;j>=0;j–){
var activeDiv=sDiv[j];
if(activeDiv){
var activeDivPos=getPosition(activeDiv);
var activeDivMinX=activeDivPos.x;
var activeDivMinY=activeDivPos.y;
var activeDivMaxX=activeDivMinX activeDiv.offsetWidth;
var activeDivMaxY=activeDivMinY activeDiv.offsetHeight;
if(activeDivMaxX>dragObjCntX&&activeDivMaxY>dragObjCntY){
//if(dragObjCntX>activeDivMinX&&dragObjCntX<activeDivMaxX&&dragObjCntY>activeDivMinY&&dragObjCntY<activeDivMaxY){
beforNode=activeDiv;
}
}
}
//若此区块存在,就在此区块前插入拖动元素
if(beforNode!=null){
if(dragObject.parentNode!=beforNode){
curContainer.insertBefore(dragObject.parentNode,beforNode);
dragObject.parentNode.style.display=”block”;
//document.getElementById(”test”).value=curContainer.id;
}
}
//不存在就在所在列插入拖动元素
else{
curContainer.appendChild(dragObject.parentNode);
dragObject.parentNode.style.display=”block”;
}
}
return false;
}

好了,一个可以拖动布局de页面就完成了 查看最终页面效果
能力有限,有些地方可能说de不清不楚,若有兴趣,自己好好看看相关代码吧.
有什么不足de地方,请指教.

基础知识:HTML
JavaScript就这么回事1:基础知识
1 创建脚本块
1: <script language=”JavaScript”>
2: JavaScript code goes here
3: </script>
2 隐藏脚本相关代码
1: <script language=”JavaScript”>
2: <!–
3: document.write(“Hello”);
4: // –>
5: </script>
在不支持JavaScriptde浏览器中将不执行相关相关代码
3 浏览器不支持de时候显示
1: <noscript>
2: Hello to the non-JavaScript browser.
3: </noscript>
4 链接外部脚本文件
1: <script language=”JavaScript” src=”/”filename.js””></script>
5 注释脚本
1: // This is a comment
2: document.write(“Hello”); // This is a comment
3: /*
4: All of this
5: is a comment
6: */
6 输出到浏览器
1: document.write(“<strong>Hello</strong>”);
7 定义变量
1: var myVariable = “some value”;
8 字符串相加
1: var myString = “String1” “String2”;
9 字符串搜索
1: <script language=”JavaScript”>
2: <!–
3: var myVariable = “Hello there”;
4: var therePlace = myVariable.search(“there”);
5: document.write(therePlace);
6: // –>
7: </script>
10 字符串替换
1: thisVar.replace(“Monday”,”Friday”);
11 格式化字串
1: <script language=”JavaScript”>
2: <!–
3: var myVariable = “Hello there”;
4: document.write(myVariable.big() “<br>”);
5: document.write(myVariable.blink() “<br>”);
6: document.write(myVariable.bold() “<br>”);
7: document.write(myVariable.fixed() “<br>”);
8: document.write(myVariable.fontcolor(“red”) “<br>”);
9: document.write(myVariable.fontsize(“18pt”) “<br>”);
10: document.write(myVariable.italics() “<br>”);
11: document.write(myVariable.small() “<br>”);
12: document.write(myVariable.strike() “<br>”);
13: document.write(myVariable.sub() “<br>”);
14: document.write(myVariable.sup() “<br>”);
15: document.write(myVariable.toLowerCase() “<br>”);
16: document.write(myVariable.toUpperCase() “<br>”);
17:
18: var firstString = “My String”;
19: var finalString = firstString.bold().toLowerCase().fontcolor(“red”);
20: // –>
21: </script>
12 创建数组
1: <script language=”JavaScript”>
2: <!–
3: var myArray = new Array(5);
4: myArray[0] = “First Entry”;
5: myArray[1] = “Second Entry”;
6: myArray[2] = “Third Entry”;
7: myArray[3] = “Fourth Entry”;
8: myArray[4] = “Fifth Entry”;
9: var anotherArray = new Array(“First Entry”,”Second Entry”,”Third Entry”,”Fourth Entry”,”Fifth Entry”);
10: // –>
11: </script>
13 数组排序
1: <script language=”JavaScript”>
2: <!–
3: var myArray = new Array(5);
4: myArray[0] = “z”;
5: myArray[1] = “c”;
6: myArray[2] = “d”;
7: myArray[3] = “a”;
8: myArray[4] = “q”;
9: document.write(myArray.sort());
10: // –>
11: </script>

14 分割字符串
1: <script language=”JavaScript”>
2: <!–
3: var myVariable = “a,b,c,d”;
4: var stringArray = myVariable.split(“,”);
5: document.write(stringArray[0]);
6: document.write(stringArray[1]);
7: document.write(stringArray[2]);
8: document.write(stringArray[3]);
9: // –>
10: </script>

15 弹出警告信息
1: <script language=”JavaScript”>
2: <!–
3: window.alert(“Hello”);
4: // –>
5: </script>

16 弹出确认框
1: <script language=”JavaScript”>
2: <!–
3: var result = window.confirm(“Click OK to continue”);
4: // –>
5: </script>

17 定义函数
1: <script language=”JavaScript”>
2: <!–
3: function multiple(number1,number2) {
4: var result = number1 * number2;
5: return result;
6: }
7: // –>
8: </script>

18 调用JS函数
1: <a href=”#” onClick=”functionName()”>Link text</a>
2: <a href=”/”javascript:functionName”()”>Link text</a>

19 在页面加载完成后执行函数
1: <body onLoad=”functionName();”>
2: Body of the page
3: </body>

20 条件判断
1: <script>
2: <!–
3: var userChoice = window.confirm(“Choose OK or Cancel”);
4: var result = (userChoice == true) ? “OK” : “Cancel”;
5: document.write(result);
6: // –>
7: </script>