前段时间有个客户说要做个像bbc一样可以拖拽布局和编辑功能的网站。公司就让我做了个Demo,基本实现了这些功能。 新闻中心窗口可以编辑,不过数据是静态的，还没加Ajax。 目前只在IE6 和FF2.0下测试过，其他浏览器还不知道。
// JavaScript Document
//事件格式化函数，摘自JavaScript高级程序一书 p258
var EventUtil = new Object;
EventUtil.addEventHandler = function(oTarget, sEventType, fnHandler){
if( oTarget.addEventListener){
oTarget.addEventListener(sEventType, fnHandler, false);
}else if( oTarget.attachEvent ){
oTarget.attachEvent("on" + sEventType, fnHandler);
}else{
oTarget["on" + sEventType] = fnHandler;
}
};
EventUtil.removeEventHandler = function(oTarget, sEventType, fnHandler){
if( oTarget.removeEventListener){
oTarget.removeEventListener(sEventType, fnHandler, false);
}else if( oTarget.detachEvent ){
oTarget.detachEvent("on" + sEventType, fnHandler);
}else{
oTarget["on" + sEventType] = null;
}
};
EventUtil.formatEvent = function(oEvent){
if(document.all){
oEvent.charCode = ( oEvent.type == "keypress" ) ? oEvent.keyCode : 0;
oEvent.eventPhase = 2;
oEvent.isChar = ( oEvent.charCode > 0 );
oEvent.pageX = oEvent.clientX + document.body.scrollLeft;
oEvent.pageY = oEvent.clientY + document.body.scrollTop;
oEvent.preventDefault = function(){
this.returnValue = false;
};
if( oEvent.type == "mouseout" ){
oEvent.relatedTarget = oEvent.toElement;
}else if( oEvent.type == "mouseover" ){
oEvent.relatedTarget = oEvent.fromElement;
}
oEvent.stopPropagation = function(){
this.cancelBubble = true;
};
oEvent.target = oEvent.srcElement;
oEvent.time = (new Date()).getTime();
}
return oEvent;
};
EventUtil.getEvent = function(){
if( window.event ){
return this.formatEvent(window.event);
}
else{
return EventUtil.getEvent.caller.arguments[0];
}
};
<!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>Drag Drop Demo</title>
<script type="text/javascript" src="js/eventutil.js"></script>
<style type="text/css">
html, body{
font-size:12px; margin:0px; padding:0px; color:#333333;
}
a{color:#555; text-decoration:none;}
a:hover{color:#FFaa00;}
.page{width:1000px; border:0px solid #F8F8F8;}
.header{width:100%;border:1px solid #008000; height:40px; text-align:center; margin-bottom:20px;}
.footer{width:100%;border:1px solid #008000; height:40px; text-align:center; clear:both;}
.content{width:920px; border:0px solid #009000; height:500px; margin:auto;}
#dragHelper{border:1px dashed #FF0000;position:relative; display:none;
filter:alpha(opacity=40); -moz-opacity:0.4;
}
.left{ width:600px; float:left;}
.left .focus{
width:600px; border:1px solid #004578; height:100px;
float:left; overflow:auto; margin-bottom:10px;
}
.left .container1{
width:290px; border:0px solid #004578;
height:auto; min-height:100px; float:left;
}
.left .container2{
width:290px; border:0px solid #004578;
height:auto; min-height:100px; float:right;
}
.content .container3{
width:290px; border:0px solid #000090;
height:auto; min-height:100px; float:right;
}
.box {
position:relative; width:100%; height:116px;
}
.fwwin{
border:1px solid #76c2eb;
}
.fwwinDrag{
border:1px dashed #76c2eb; height:100px;
filter: alpha(opacity=50); -moz-opacity:0.5;
}
事件格式化函数.书上的代码。
// JavaScript Document//事件格式化函数，摘自JavaScript高级程序一书 p258var EventUtil = new Object;EventUtil.addEventHandler = function(oTarget, sEventType, fnHandler){
EventUtil.addEventHandler 
if( oTarget.addEventListener){
oTarget.addEventListener(sEventType, fnHandler, false); }else if( oTarget.attachEvent ){ oTarget.attachEvent("on" + sEventType, fnHandler); }else{ oTarget["on" + sEventType] = fnHandler; }};EventUtil.removeEventHandler = function(oTarget, sEventType, fnHandler){ if( oTarget.removeEventListener){ oTarget.removeEventListener(sEventType, fnHandler, false); }else if( oTarget.detachEvent ){ oTarget.detachEvent("on" + sEventType, fnHandler); }else{ oTarget["on" + sEventType] = null; }};EventUtil.formatEvent = function(oEvent){ if(document.all){ oEvent.charCode = ( oEvent.type == "keypress" ) ? oEvent.keyCode : 0; oEvent.eventPhase = 2; oEvent.isChar = ( oEvent.charCode > 0 ); oEvent.pageX = oEvent.clientX + document.body.scrollLeft; oEvent.pageY = oEvent.clientY + document.body.scrollTop; oEvent.preventDefault = function(){ this.returnValue = false; }; if( oEvent.type == "mouseout" ){ oEvent.relatedTarget = oEvent.toElement; }else if( oEvent.type == "mouseover" ){ oEvent.relatedTarget = oEvent.fromElement; } oEvent.stopPropagation = function(){ this.cancelBubble = true; }; oEvent.target = oEvent.srcElement; oEvent.time = (new Date()).getTime(); } return oEvent;};EventUtil.getEvent = function(){ if( window.event ){ return this.formatEvent(window.event); } else{ return EventUtil.getEvent.caller.arguments[0]; }};页面代码
<!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>Drag Drop Demo</title><script type="text/javascript" src="js/eventutil.js"></script><style type="text/css"> html, body{ font-size:12px; margin:0px; padding:0px; color:#333333; } a{color:#555; text-decoration:none;} a:hover{color:#FFaa00;} .page{width:1000px; border:0px solid #F8F8F8;} .header{width:100%;border:1px solid #008000; height:40px; text-align:center; margin-bottom:20px;} .footer{width:100%;border:1px solid #008000; height:40px; text-align:center; clear:both;} .content{width:920px; border:0px solid #009000; height:500px; margin:auto;} #dragHelper{border:1px dashed #FF0000;position:relative; display:none; filter:alpha(opacity=40); -moz-opacity:0.4; } .left{ width:600px; float:left;} .left .focus{ width:600px; border:1px solid #004578; height:100px; float:left; overflow:auto; margin-bottom:10px; } .left .container1{ width:290px; border:0px solid #004578; height:auto; min-height:100px; float:left; } .left .container2{ width:290px; border:0px solid #004578; height:auto; min-height:100px; float:right; } .content .container3{ width:290px; border:0px solid #000090; height:auto; min-height:100px; float:right; } .box { position:relative; width:100%; height:116px; } .fwwin{ border:1px solid #76c2eb; } .fwwinDrag{ border:1px dashed #76c2eb; height:100px; filter: alpha(opacity=50); -moz-opacity:0.5; }