javascript實(shí)現(xiàn)拖拽碰撞檢測(cè)的示例

這篇文章主要介紹javascript實(shí)現(xiàn)拖拽碰撞檢測(cè)的示例，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、百色網(wǎng)站維護(hù)、網(wǎng)站推廣。

具體內(nèi)容如下

拖拽碰撞檢測(cè)碰撞改變顏色

css:

<style>
    .div1{width: 100px;height: 100px;background: pink;position: absolute;}
    .div2{
     width: 150px;height: 150px;background: gray;position: absolute;
     top: 35%;
     left: 35%;
    }
</style>

html:

<body>
  <div class="div1"></div>
  <div class="div2"></div>
</body>

js:

 <script>
    window.onload = function () {
      var oDiv = document.getElementsByTagName("div")[0];
      var oDiv2 = document.getElementsByTagName("div")[1];
      
      //1.按下 拖動(dòng)
      oDiv.onmousedown = function (ev) {
        var oEvent = window.event || ev;
        //5.計(jì)算需要往回移動(dòng)的距離
        //鼠標(biāo)與盒子的左相對(duì)距離
        var l = oEvent.clientX - oDiv.offsetLeft;
        //鼠標(biāo)與盒子的上相對(duì)距離
        var t = oEvent.clientY - oDiv.offsetTop;

        document.onmousemove = function (ev) {
          var oEvent = window.event || ev;
   //oEvent.preventDefault();
          //2.獲取鼠標(biāo)坐標(biāo)位置
          var x = oEvent.clientX;
          var y = oEvent.clientY;
          
          //div的坐標(biāo)位置
          var x1 = x - l;
          var y1 = y - t;
          
          //div2的真實(shí)寬度
          var oDiv2Width = oDiv2.offsetWidth;
          //div2的X坐標(biāo)
          var oDiv2Left = oDiv2.offsetLeft;
          //第一個(gè)左邊的臨界值
          var div1L = x1 + oDiv.offsetWidth;
          //第二個(gè)左邊的臨界值
          var div1L2 = oDiv2Width + oDiv2Left;
          //左邊的兩個(gè)臨界值的判斷
          //第一個(gè)上面的臨界值
          var div1Top = y1 + oDiv.offsetHeight;
          //第二上面的臨界值
          var div1Top2 = oDiv2.offsetTop + oDiv2.offsetHeight;
          
          
          
          if(div1L>=oDiv2Left && x1 <= div1L2 && div1Top>=oDiv2.offsetTop && y1 <=div1Top2){
           oDiv2.style.backgroundColor = 'yellow';
          }else{
           oDiv2.style.backgroundColor = 'gray';
          }          
                   
          //3.設(shè)置div的位置
          oDiv.style.left = x1 + "px";
          oDiv.style.top = y1 + "px";
          //增加一個(gè)全局捕獲事件
          //這個(gè)全局捕獲事件 是兼容低版本的ie瀏覽器的
          if(oDiv.setCapture){
           oDiv.setCapture();
          }
          return false;
          //這個(gè)return false不在ie瀏覽器下生效
        }  
      }

      oDiv.onmouseup = function () {
        //4.取消掉移動(dòng)事件
        //當(dāng)我們抬起鼠標(biāo)的時(shí)候 就應(yīng)該釋放全局捕獲事件
        if(oDiv.releaseCapture){
         oDiv.releaseCapture()
        }
        document.onmousemove = null;
      }

    }
</script>

javascript實(shí)現(xiàn)拖拽碰撞檢測(cè)的示例

以上是“javascript實(shí)現(xiàn)拖拽碰撞檢測(cè)的示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁題目：javascript實(shí)現(xiàn)拖拽碰撞檢測(cè)的示例
本文路徑：http://www.muchs.cn/article8/ippjip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、響應(yīng)式網(wǎng)站、外貿(mào)建站、軟件開發(fā)、ChatGPT、移動(dòng)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容