火狐与IE拖拽 - 生

<!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>

posted on 2012-03-20 22:21 生阅读(389) 评论(0) 收藏举报

刷新页面返回顶部