拖拽方塊變色

<!DOCTYPE html>

         <html>

             <head>

              <meta  charset="UTF-8">

              <title></title>

              <style>

                    //清除頁面內(nèi)外間距

                     *  {

                        margin:0;

                        padding:0;

                       }

                    //設(shè)置藍(lán)色方塊樣式

                     #blue {

                       width:100px；

                       height:100px;

                       background:blue;

                       position:absolute;

                     }

                     //設(shè)置紅色方塊樣式

                    #red{

                       width:100px；

                       height:100px;

                       background:red;

                       position:absolute;

                        top:40%;

                        left:60%;

                     }

             </style>

            </head>

<body>

           <----頁面兩個(gè)方塊---->

        <div   id="blue"></div>

        <div   id="red"></div>

<script>

         //藍(lán)色方塊按下事件

         blue.onmousedown = function(e) {

                   var e = e || window.event;

                    //獲取鼠標(biāo)點(diǎn)擊距離

                   var left = e.offsetX;

                   var top = e.offsetY;

          //藍(lán)色方塊移動事件

        window.onmousemove = function(e) {

                   var e = e || window.event;

                   blue.style.left = e.clientX - left + "px";

                   blue.style.top = e.clientY - top + "px";

                   //判斷藍(lán)色方塊進(jìn)行拖拽時(shí)情況

                  if(blue.offsetLeft + blue.offsetWidth < red.offsetLeft ||

                  blue.offsetTop + blue.offsetHeight < red.offsetTop ||

                  blue.offsetLeft > red.offsetWidth + red.offsetLeft ||

                  blue.offsetTop > red.offsetTop + red.offsetHeight)    {

                  red.style.background = "";

                  red.style.zIndex = "0";

                 } else {

                red.style.background = "pink";

                blue.style.zIndex = "1";

                 }

                 }

                 }

          //藍(lán)色方塊松開時(shí)清除移動事件

         window.onmouseup = function() {

                  window.onmousemove = "";

                 }

         //紅色方塊按下事件

         red.onmousedown = function(e) {

                  var e = e || window.event;

                   //獲取鼠標(biāo)點(diǎn)擊距離

                  var left = e.offsetX;

                  var top = e.offsetY;

                   //紅色方塊移動事件

         window.onmousemove = function(e) {

                  var e = e || window.event;

                  red.style.left = e.clientX - left + "px";

                  red.style.top = e.clientY - top + "px";

                       //判斷紅色方塊進(jìn)行拖拽時(shí)情況

                   if(red.offsetLeft + red.offsetWidth < blue.offsetLeft ||

                   red.offsetTop + red.offsetHeight < blue.offsetTop ||

                   red.offsetLeft > blue.offsetWidth + blue.offsetLeft ||

                   red.offsetTop > blue.offsetTop + blue.offsetHeight) {

                             blue.style.background = "";

                             blue.style.zIndex = "0";

                  } else {

                            blue.style.background = "green";

                               red.style.zIndex = "1";

                 }

                 }

                 }

                //紅色方塊松開時(shí)清除移動事件

       window.onmouseup = function() {

                    window.onmousemove = "";

               }

           </script>

      </body>

</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容