javascript拖拽效果。里面还增加了弹性运动、自由落体、碰撞 运动（转）

<script type="text/javascript">

window.onload = function() {

var oBox = document.getElementById('box');

var oDrag = document.getElementById('drag');

var iW = oBox.offsetWidth,

    iH = oBox.offsetHeight,

    clientW = document.documentElement.clientWidth,

    clientH = document.documentElement.clientHeight,

    scrollY = document.documentElement.scrollTop || document.body.scrollTop,

    iSpeedX = 0,

    iSpeedY = 0,

    timer = null;

function move(){

    clearInterval(timer);

    timer = setInterval(function(){

        iSpeedY += 5;

        var l = oBox.offsetLeft + iSpeedX;

        var t = oBox.offsetTop + iSpeedY;

        if(t > clientH-iH){

            t = clientH - iH + scrollY;

            iSpeedY *= -1;

            iSpeedY *= .7;

            iSpeedX *= .7;

        }else if(t <0 ){

            t = 0;

            iSpeedY *= -1;

            iSpeedY *= .7;

        }

        if(l > clientW-iW){

            l = clientW - iW;

            iSpeedX *= -1;

            iSpeedX *= .7;

        }else if(l < 0){

            l = 0;

            iSpeedX *= -1;

            iSpeedX *= .7;

        }

        oBox.style.left = l + 'px';

        oBox.style.top = t + 'px';

    }, 30);

}

oDrag.onmousedown = function(ev){

    var e = ev || window.event,

        preX = e.clientX,

        preY = e.clientY,

        x = preX - oBox.offsetLeft,

        y = preY - oBox.offsetTop;

    clearInterval(timer);

    if(oBox.setCapture){ oBox.setCapture(); }

            

    document.onmousemove = function(ev){

        var e = ev || window.event,

            left = e.clientX - x,

            top = e.clientY - y;

            if(left < 0){

                left = 0;

            }else if(left > clientW - iW){

                left = clientW - iW;

            }

            if(top < 0){

                top = 0;

            }

                    

            oBox.style.left = left + 'px';

            oBox.style.top = top + 'px';

            iSpeedX = e.clientX - preX;

            iSpeedY = e.clientY - preY;

            preX = e.clientX;

            preY = e.clientY;

    }

    document.onmouseup = function(){

                

        document.onmousemove = null;

        document.onmouseup = null;

                

        if(oBox.releaseCapture) { oBox.releaseCapture(); }

                

        move();

    }

    return false;

}

}

</script>

 

转载文章请注明，转载自：胡航飞博客 [http://www.huhangfei.com]

原文链接：http://www.huhangfei.com/program/javascript-jquery-378.html