娆ц仈璧涚▼ : JavaScript拖拽效果的原理及實現

JavaScript拖拽效果的原理及實現

欧洲青年联赛 www.enqgt.com JavaScript中實現拖拽效果需要用到事件偵聽鼠標事件。事件偵聽是對被拖拽的元素添加事件偵聽,包括mousedown,mousemove,mouseup。

常見的拖拽操作基本就是下面的方式:

  1、用鼠標點擊選中被拖拽的元素

  2、按住鼠標不放,拖動鼠標

  3、拖拽元素到一定位置,放開鼠標實現拖拽的效果

在逆戰班的學習中一些情況下還需要用到mouseleave。這里講述的案例是存在多個元素情況下的拖拽。

以下先展示拖拽效果,如下所示:

具體的代碼如下所示:

1.創建div元素并設置簡單的CSS樣式

<style>
    div {
      width: 50px;
      height: 50px;
      background-color: blue;
      text-align: center;
      position: absolute; /*設置的這些div默認重疊在頁面左上角*/
    }
  </style>
  <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>

2.每一個div都需要有一個偵聽事件,才能實現所有的div都有拖拽效果。代碼如下

var divs = document.querySelectorAll("div"); //獲取div元素的偽數組集合
      for (var i = 0; i < divs.length; i++) {
        //利用for循環,給每個div添加一個鼠標按下的事件,來觸發函數mouseHandler
        divs[i].addEventListener("mousedown", mouseHandler);
      }

3.函數mouseHandler的主體部分了,這里我采用的是if,else if來寫。

 function mouseHandler(e) {
        //通過判斷事件的類型來執行對應的條件語句
        if (e.type === "mousedown") {
          e.preventDefault();
          //這里將e.target賦給document.div,相當于設了一個局部變量,在觸發mousemove事件后,
          //再次進入函數時,保證觸發事件的div就是我們要改變位置的那個div
          document.div = e.target;
          //這里也是將鼠標相對拖拽的那個div元素
          //左上角的位置,設置成一個對象進行保存其實相當于如下兩條
          document.offset = { x: e.offsetX, y: e.offsetY };
          //document.offsetx=e.offsetX;將e.offsetX賦值給自定義變量document.offsetx
          //document.offsety=e.offsetY;將e.offsetY賦值給自定義變量document.offsety
          //和上面是兩種寫法
          //在鼠標點擊后,如果發生鼠標移動事件,則再次進入該函數進行執行鼠標移動的執行語句
          document.addEventListener("mousemove", mouseHandler);
          //在鼠標點擊后,如果發生鼠標釋放事件,則再次進入該函數進行執行,則再次進入該函數進行執行鼠標釋放的執行語句
          document.addEventListener("mouseup", mouseHandler);
        } else if (e.type === "mousemove") {
          //判斷觸發的事件類型是mousemove之后執行
          //這里的document.div和document.offset.x都是之前定義好的變量,用e.clientX-document.offset.x
          //是因為元素的position位置是相對元素的左上頂點的位置的,因此鼠標所在的位置值不能直接賦給它。
          document.div.style.left = e.clientX - document.offset.x + "px";
          document.div.style.top = e.clientY - document.offset.y + "px";
        } else if (e.type === "mouseup") {
          //如果鼠標釋放,則執行移除事件偵聽
          document.removeEventListener("mousemove", mouseHandler);
          document.removeEventListener("mouseup", mouseHandler);
        }
      }
posted @ 2020-04-06 20:19  Sunny向天  閱讀(...)  評論(...編輯  收藏