JavaScript 拖拽效果实现

淩亂°似流年 2022-05-17 07:39 304阅读 0赞

我们在访问一些网站时，会发现有些内容是可以拖拽的，比较方便，那么使用JS怎么实现呢？今天结合代码展示下拖拽效果的实现。

这里需要先熟悉下几个JS事件：

onmousedown：鼠标点击按下时触发

onmousemove：鼠标移动时触发

onmouseup：鼠标松开时触发

另外需要明白：在一个html页面中，存在 元素对象 < HTMLObject < Document Object 这三个权限依次递增。下面针对具体的代码进行举例。

1 JS代码：

//关于以下两部 请看图示  
            //拖拽时鼠标相对于块的X位置：event.clientX-元素.offsetLeft  
            //拖拽时鼠标相对于块的Y位置：event.clientY-元素.offsetTop  
            var l=event.clientX-obj.offsetLeft;  
            var t=event.clientY-obj.offsetTop;   
            document.οnmοusemοve=function(event)\{  
                //解决兼容性问题  
                event=event||window.event;  
                var left=event.clientX-l;  
                var top=event.clientY-t;  
                obj.style.left=left+"px";  
                obj.style.top=top+"px";  
            \}  
            document.οnmοuseup=function()\{  
                //alert("hah");  
                //释放鼠标事件  
                document.οnmοusemοve=null;  
                document.οnmοuseup=null;  
                obj.releaseCapture && obj.releaseCapture();  
            \}  
            //获取鼠标点击 防止 页面ctrl+A导致功能失效  
            return false;  
        \};  
    \}  
      
</script>

![70][]

2 HTML 代码：

//这里使body极大 目的是为了测试当页面巨大的时候，拖拽是否起作用。

//这里的 position一定要加 不然会使拖拽在改变 left top偏移量时失效  
<div id="box" style="position:absolute"></div>  
</body>

3 CSS代码：

通过以上操作，可以实现一个鼠标满页面进行拖拽的滑块，希望可以帮到大家。

[70]: /images/20220517/b3d87f4bcaef4c0797a71e119422836a.png