js初级学习之拖拽功能复数个且变色

晓秒四下

于 2020-01-03 22:22:31 发布

阅读量148

点赞数

本文链接：https://blog.csdn.net/MENGCHIXIANZI/article/details/103827873

版权

JavaScript 同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

<body>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <script type="text/javascript">
        //div1.onmousedown = function(){
        document.documentElement.onmousedown=function(){   
            
            var iTarge = event.target || event.srcElement;

            if(iTarge.className == 'div1'){
                var l = event.clientX - iTarge.offsetLeft;
                var t = event.clientY - iTarge.offsetTop;
                document.onmousemove = function(){
                
                iTarge.style.background = 'pink';

                var needX = event.clientX - l;
                var needY = event.clientY - t;
                if(needX<0){needX=0;}
                if(needY<0){needY=0;}
                var w = innerWidth - iTarge.offsetWidth;
                var h = innerHeight - iTarge.offsetHeight;
                if(needX>w){needX = w;}
                if(needY>h){needY = h;}
                iTarge.style.left = needX + 'px';
                iTarge.style.top = needY + 'px';
            }
            document.onmouseup = function(){
                iTarge.style.background = 'cornflowerblue';
                document.onmousemove = null;
                document.onmouseup = null;
            }
            }
                     
        }

        //div1.onmouseup = function(){
        //  div1.onmousedown = null;
        //  div1.onmouseup = null;
        //}

    </script>
</body>