鼠标拖拽事件

Posted jiangtao159

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鼠标拖拽事件相关的知识，希望对你有一定的参考价值。

鼠标拖拽事件：

    • 鼠标按下事件；
    • 鼠标移动事件；
    • 鼠标抬起事件。
    • 移动前移动后鼠标在元素上的相对位置不发生改变，所以要记录鼠标在元素上的位置。
      在移动的时候需要记录元素的偏移数
      最后需要判断边界，当元素到达边界时就不能再移动了
      最后需要 把属性重新设置一下，否则元素不能被拖拽。

 

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            *{
                margin:0;
                padding:0;
                
            }
            div{
                width:100px;
                height:100px;
                background:red;
                position:absolute;  /* 对元素进行定位*/
                left:0;
                top:0;
            }
        </style>
    </head>
    
    <body>
        <div></div>
    </body>
    <script>
        var oDiv = document.getElementsByTagName(‘div‘)[0]
        var body = document.getElementsByTagName(‘body‘)[0]
        
        // 计算最大偏移距离（后期判断边界时要用到）  oDiv.offsetWidth：表示div的宽度
        var maxLeft = window.innerWidth - oDiv.offsetWidth
        var maxTop = window.innerHeight - oDiv.offsetHeight
        
        // 鼠标按下事件
        oDiv.onmousedown = function (e) {
            var ev = e || event
            //记录鼠标在元素上的位置
            var posX = ev.clientX-oDiv.offsetLeft
            var posY = ev.clientY-oDiv.offsetTop
            //鼠标移动事件
            body.onmousemove = function(e){
                var ev = e || event
                //计算元素的偏移
                var left = ev.clientX-posX
                var top = ev.clientY-posY
                //判断边界
                if (left<0){
                    left=0
                }else if (left>maxLeft){
                    left=maxLeft
                }
                if (top<0){
                    top=0
                }else if(top>maxTop){
                    top=maxTop
                }
                
                //重新设置属性
                oDiv.style.left = left + "px"
                oDiv.style.top = top + "px"
            }    
            //鼠标抬起事件
            body.onmouseup = function(){
                body.onmousemove = null
                body.onmouseup = null
            }
        }
        
    </script>
</html>

 




以上是关于鼠标拖拽事件的主要内容，如果未能解决你的问题，请参考以下文章

鼠标拖拽事件

JS——事件详情（拖拽案例：onmousedownonmousemoveonmouseup方法）

即使鼠标不移动，D3'Drag'事件也会触发

鼠标拖拽图像

js拖拽事件

鼠标事件-拖拽5（带虚线框的拖拽）