js实现拖拽

最新推荐文章于 2021-06-03 21:07:18 发布

weixin_34395205

最新推荐文章于 2021-06-03 21:07:18 发布

阅读量64

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/chayangge/p/4288695.html

版权

拖拽：最核心是三个事件，鼠标按下，鼠标移动，鼠标弹起。按下时激活拖拽，然后时刻根据鼠标的位置来更新物体的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.οnlοad=function(){
   var odiv=document.getElementById('d');
    odiv.οnmοusedοwn=function(event){
        var e=event||window.event;
        var difx=event.clientX-odiv.offsetLeft;//刚移动时物体要在原有的位置点开始移动，而不是事件发生的位置处开始移动,difx和dify为点击处
        var dify=event.clientY-odiv.offsetTop; //离物体左上角（实际位置）的距离


        document.οnmοusemοve=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.οnmοuseup=function(){ //鼠标弹起，取消事件
            document.οnmοuseup=null;
            document.οnmοusemοve=null;
        }
    }
 
}
  
</script>
</head>
<body>
    <div id='d'></div>
</body>
</html>

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

转载于:https://www.cnblogs.com/chayangge/p/4288695.html