js实现拖拽

拖拽：最核心是三个事件，鼠标按下，鼠标移动，鼠标弹起。按下时激活拖拽，然后时刻根据鼠标的位置来更新物体的left和top值，达到跟随鼠标的效果，鼠标弹起则取消拖拽。

以下是代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="gbk" />

<title>拖拽</title>

<style>

*{

    margin:0px;

}

div{

    height:200px;

    width:200px;

    background:red;

    position: absolute;

    cursor:pointer;

}

</style>

<script type="text/javascript">

window.onload=function(){

   var odiv=document.getElementById('d');

    odiv.onmousedown=function(event){

        var e=event||window.event;

        var difx=event.clientX-odiv.offsetLeft;//刚移动时物体要在原有的位置点开始移动，而不是事件发生的位置处开始移动,difx和dify为点击处

        var dify=event.clientY-odiv.offsetTop; //离物体左上角（实际位置）的距离

        document.onmousemove=function(event){

            var event=event||window.event;

            var left=event.clientX-difx;

            var top=event.clientY-dify;

            var maxleft=document.documentElement.clientWidth-odiv.offsetWidth;  //计算最大移动距离

            var maxtop=document.documentElement.clientHeight-odiv.offsetHeight;

            left=left<0?0:left;                //防止越界

            left=left>maxleft?maxleft:left;

            top=top<0?0:top;

            top=top>maxtop?maxtop:top;

                odiv.style.left=left+'px';    //时刻更新位置达到跟随鼠标

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

        }

        document.onmouseup=function(){ //鼠标弹起，取消事件

            document.onmouseup=null;

            document.onmousemove=null;

        }

    }

}

</script>

</head>

<body>

    <div id='d'></div>

</body>

</html>

原理很简单，但实现过程要考虑很多细节，如刚移动时物体要在原有的位置点开始移动，而不是事件发生的位置处开始移动，还有计算物体有没有越界，越界则停止移动等细节问题。

巴特西

js实现拖拽

最新文章

热门文章