原生Javascript之拖曳效果

最新推荐文章于 2023-12-29 17:50:08 发布

jaxonHJX

最新推荐文章于 2023-12-29 17:50:08 发布

阅读量449

点赞数

分类专栏： Web开发 web前端

本文链接：https://blog.csdn.net/hujiaxuan1995/article/details/41149481

版权

Web开发同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

web前端

4 篇文章 0 订阅

订阅专栏

用javascript写拖曳效果好像是阿里前端的一道面试题，前些天在看《javascript权威指南》一书时看到了实现这个功能的代码，就索性发扬了一下拿来主义。废话不多说，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>drag</title>
        <style>
                body{
                        text-align:center;
                }
        </style>
</head>
<body>
        <img src="http://e.hiphotos.baidu.com/image/w%3D310/sign=ba2b0707f4246b607b0eb475dbf81a35/b3b7d0a20cf431adcfcd1a6d4936acaf2edd9842.jpg" alt="" style="position:absolute;left:100px;top:100px;" onmousedown = "drag(this,event);">
        <script>
                function drag(elementToDrag,event){
                        var scroll = getScrollOffsets();
                        var startX = event.clientX + scroll.x;
                        var startY = event.clientY + scroll.y;


                        var origX = elementToDrag.offsetLeft;
                        var origY = elementToDrag.offsetTop;
                        var deltaX = startX-origX;
                        var deltaY = startY-origY; //鼠标和元素左上角的距离


                        if(document.addEventListener){
                                document.addEventListener("mousemove",moveHandler,true);
                                document.addEventListener("mouseup",upHandler,true);
                        }else if(document.attachEvent){
                                elementToDrag.setCapture();
                                elementToDrag.attachEvent("onmousemove",moveHandler);
                                elementToDrag.attachEvent("onmouseup",upHandler);


                                elementToDrag.attachEvent("onlosecapture",upHandler);
                        }
                        if(event.stopPropagation) event.stopPropagation();
                        else event.cancelBubble = true;


                        if(event.preventDefault) event.preventDefault();
                        else event.returnValue=false; //阻止任何默认操作


                        function moveHandler(e){
                                if(!e) e = window.event;
                                var scroll = getScrollOffsets();
                                elementToDrag.style.left = (e.clientX+scroll.x - deltaX)+"px";
                                elementToDrag.style.top = (e.clientY+scroll.y-deltaY)+"px";
                                if(e.stopPropagation) e.stopPropagation();
                                else e.cancelBubble = true;
                        }


                        function upHandler(e){
                                if(!e) e=window.event;
                                if(document.removeEventListener){
                                        document.removeEventListener("mouseup",upHandler,true);
                                        document.removeEventListener("mousemove",moveHandler,true);
                                }else if(document.detachEvnet){
                                        elementToDrag.detachEvent("onlosecapture",upHandler);
                                        elementToDrag.detachEvent("onmouseup",upHandler);
                                        elementToDrag.detachEvent("onmousemove",moveHandler);
                                }
                                if(e.stopPropagation) e.stopPropagation();
                                else e.cancelBubble = true;
                        }


                }




                function getScrollOffsets(w){
                        w = w || window;
                        if(w.pageXOffset != null) return {x:w.pageXOffset,y:w.pageYOffset};
                        var d=w.document;
                        if(document.compatMode == "CSS1Compat")
                                return {x:d.documentElement.scrollLeft,y:d.documentElement.scrollTop};
                        return {x:d.body.scrollLeft,y:d.body.scrollTop};                
                }
        </script>
</body>
</html>