小练习：元素的拖放

前端开发作者： 2024-08-25 20:25:01

看到很多地方都用到了拖放，因此就自己尝试写了一个，刚开始以为很简单，结果到处都是陷阱。不多说了，先放写好的程序，在来说说其中遇到的问题。不过大家可以先自己写写，再来看可能效果更好。 <!do

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #drag{
            position: fixed;
            top:100px;
            left: 100px;
            width: 100px;
            height: 100px;
            background: #cdc;
        }
    </style>
</head>
<body>
    <div id="drag">
    </div>
</body>
    <script>
        var dragFn,pX,pY,sX,sY,dropFn,dragFlag=false,w=window;

        var dom=document.getElementById("drag");

        dom.addEventListener("mousedown",dragFn=function  (event) {
            dragFlag=true;
            console.log(dom.style.left+"");
            pX =  parseInt(w.getComputedStyle(dom,null)['left']); //获得初始位置
            pY = parseInt(w.getComputedStyle(dom,1)">null)['top']);
            sX=event.clientX-pX;
            sY=event.clientY-pY;  //
        });

        addEventListener('mouseup',dropFn = function(){ dragFlag = false; });设置为false，禁止拖动

        addEventListener('mousemove',mFn = (event){ onDrag(event); })

         onDrag(event) {
                if(dragFlag){ 先检验是否可以拖动

                    var l= (event.clientX -sX);
                    var t = (event.clientY -  sY);

                    var wl=window.innerWidth-dom.offsetWidth;
                    var wt=window.innerHeight-dom.offsetHeight;  页面的宽度减去dom的宽度

                    if (l<0){l=0;}
                    if (l>wl){l=wl;} 不得超出屏幕的宽度
                    if (t<0){t=0if (t>wt){t=wt;}

                        dom.style.left = l+ 'px';
                        dom.style.top = t+ 'px';
                }
            }
    </script>
</html>

View Code

dom.addEventListener("mousedown",1)">  (event) {
......
}
dom.addEventListener('mouseup',1)">
dom.addEventListener('mousemove',1)">function(event){ onDrag(event); })

dom.addEventListener("mousedown",1)">  (event) {
......
}
addEventListener('mouseup',1)">
addEventListener('mousemove',1)">function(event){ onDrag(event); })

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_68583.html

相关资讯：小练习：元素的拖放