<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> my final move page,^_^ </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
#box{position:absolute}
.t_left{background:transparent url(images/lay/top_left.png) repeat scroll 0 0;width:13px;}
.t_center{background:transparent url(images/lay/top_center.png) repeat-x scroll 0 0;}
.t_right{background:transparent url(images/lay/top_right.png) repeat scroll 0 0;width:13px;}
.m_left{background:transparent url(images/lay/left.png) repeat-y scroll 0 0;}
.m_center{background:#FFFFFF none repeat scroll 0 0;width:497px;height:293px;}
.m_right{background:transparent url(images/lay/right.png) repeat-y scroll 0 0;}
.b_left{background:transparent url(images/lay/bottom_left.png) no-repeat scroll 0 0;}
.b_center{background:transparent url(images/lay/bottom_center.png) repeat-x scroll 0 0;}
.b_right{background:transparent url(images/lay/bottom_right.png) no-repeat scroll 0 0;}
</style>
</HEAD>
<BODY>
<table onmousedown="drag(this,event)" id="box" cellspacing="0" cellpadding="0">
<tr id="t_box"><td class="t_left"> </td><td class="t_center">the title</td><td class="t_right"> </td></tr>
<tr id="m_box"><td class="m_left"> </td><td class="m_center">some test</td><td class="m_right"> </td></tr>
<tr id="b_box"><td class="b_left"> </td><td class="b_center"> </td><td class="b_right"> </td></tr>
</table>
<script>
function $(id){return document.getElementById(id)}
function drag(ele,event){
var e = event||window.event
var startX = e.clientX,startY = e.clientY;
var origX = ele.offsetLeft,origY = ele.offsetTop
var d_x = startX - origX,d_y = startY-origY
var is_ie = navigator.userAgent.toLowerCase().indexOf('msie')!=-1
if(is_ie){
ele.setCapture();
ele.attachEvent('onmousemove',move_fun)
ele.attachEvent('onmouseup',up_fun)
ele.attachEvent('onlosecapture',up_fun)
}else{
//window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
document.addEventListener('mousemove',move_fun,true)
document.addEventListener('mouseup',up_fun,true)
}
//is_ie ? e.cancelBubble = true : e.stopPropagation();
//is_ie ? e.returnValue = false : e.preventDefault();
function move_fun(event){
var e = event||window.event
ele.style.left = (e.clientX - d_x)+'px'
ele.style.top = (e.clientY - d_y)+'px'
//is_ie ? e.cancelBubble = true : e.stopPropagation();
}
function up_fun(e){
var e = event||window.event
if(is_ie){
ele.detachEvent('onlosecapture',up_fun)
ele.detachEvent('onmousemove',move_fun)
ele.detachEvent('onmouseup',up_fun)
ele.releaseCapture();
}else{
document.removeEventListener('mousemove',move_fun,true)
document.removeEventListener('mouseup',up_fun,true)
}
alert("up");
//is_ie ? e.cancelBubble = true : e.stopPropagation();
}
}
</script>
</BODY>
</HTML>
