欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用JavaScript輕松實現(xiàn)拖拽功能

 更新時間：2024年06月17日 08:30:06   作者：小陳同學(xué)呦  
這篇文章主要介紹了使用JavaScript輕松實現(xiàn)拖拽功能,讓你的網(wǎng)頁動起來,文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

效果展示

實現(xiàn)

要實現(xiàn)該效果需要運用 HTML5 的 dragstart 拖放操作事件

通過去開啟dragstart監(jiān)聽拖放操作事件就能實現(xiàn)圖片的拖動

<div class="empty">
      <div class="fill" draggable="true"></div>
</div>

本例子中我們對fill盒子開啟了draggable事件，fill盒子是用來存照片的

但是這樣并不能形成一個反饋，只有單純的拖動效果，效果如下圖所示

如果想要實現(xiàn)在拖動了圖片后有一個反饋效果，我們就需要使用JavaScript去監(jiān)聽draggable的開始拖動和結(jié)束拖動事件

.hold {
        border: 5px solid #00ff00;
      }

const fill = document.querySelector(".fill");
      // 拖拽開始事件
      fill.addEventListener("dragstart", DragStart);
      function DragStart(e) {
        this.classList.add("hold");
      }
      // 拖拽結(jié)束事件
      fill.addEventListener("dragend", DragEnd);
      function DragEnd(e) {
        this.classList.remove("hold");
      }

通過在拖動時給他添加邊框，結(jié)束時取消以實現(xiàn)一個反饋的效果

最后去監(jiān)聽empty盒子的即可根據(jù)不同事件觸發(fā)時，實現(xiàn)不同的效果

const empty = document.querySelectorAll(".empty");
      empty.forEach((item) => {
        // 經(jīng)過事件
        item.addEventListener("dragover", DragOver);
        // 進入事件
        item.addEventListener("dragenter", DragEnter);
        // 離開事件
        item.addEventListener("dragleave", DragLeave);
        // 拖拽結(jié)束事件
        item.addEventListener("drop", Drop);
      })

首先通過類名獲取所有的 .empty 元素

然后對每個獲取到的元素分別添加了一系列的事件監(jiān)聽：

  • item.addEventListener("dragover", DragOver);：當(dāng)元素上發(fā)生拖曳經(jīng)過事件時，執(zhí)行 DragOver 函數(shù)。
  • item.addEventListener("dragenter", DragEnter);：當(dāng)元素上發(fā)生拖曳進入事件時，執(zhí)行 DragEnter 函數(shù)。
  • item.addEventListener("dragleave", DragLeave);：當(dāng)元素上發(fā)生拖曳離開事件時，執(zhí)行 DragLeave 函數(shù)。
  • item.addEventListener("drop", Drop);：當(dāng)元素上發(fā)生拖曳放下事件時，執(zhí)行 Drop 函數(shù)。

具體思路就是在拖曳進入時給一個反饋，當(dāng)拖曳放下時將元素放入

// 拖拽經(jīng)過事件
      function DragOver(e) {
        // 阻止默認(rèn)事件
        e.preventDefault();
        console.log("拖拽經(jīng)過");
      }
      // 拖拽進入事件
      function DragEnter(e) {
        console.log("拖拽進入");
        this.classList.add("hovered");
      }
      // 拖拽離開事件
      function DragLeave(e) {
        console.log("拖拽離開");
        this.classList.remove("hovered");
      }
      // 拖拽結(jié)束事件
      function Drop(e) {
        console.log("拖拽結(jié)束");
        this.className = "empty";
        this.append(fill);
      }

  • DragOver 函數(shù)：

    • 通過 e.preventDefault() 阻止了默認(rèn)行為，以確保拖放操作按照預(yù)期進行

  • DragEnter 函數(shù)：

    • 通過 this.classList.add("hovered") 為當(dāng)前元素添加了一個名為“hovered”的類，用于進行反饋

  • DragLeave 函數(shù)：

    • 通過 this.classList.remove("hovered") 移除了之前添加的“hovered”類。

  • Drop 函數(shù)：

    • 通過 this.className = "empty" 將當(dāng)前元素的類名重置為“empty”，接著通過 this.append(fill) 將 fill 元素添加到當(dāng)前元素中

最終就能實現(xiàn)效果了

完整代碼

<!-- html5特征：<!DOCTYPE html> -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>拖拽效果</title>

    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
      .empty {
        width: 150px;
        height: 150px;
        border: 3px solid #ffcccc;
        margin-left: 10px;
        background: #dafada;
        position: relative;
      }
      .fill {
        width: 140px;
        height: 140px;
        cursor: pointer;
        background-image: url(./image.png);
        background-size: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .hold {
        border: 5px solid #00ff00;
      }
      .hovered{
        border: 3px solid #ff0000;
      }
    </style>
  </head>
  <body>
    <div class="empty">
      <div class="fill" draggable="true"></div>
    </div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>

    <script>
      const fill = document.querySelector(".fill");
      // 拖拽開始事件
      fill.addEventListener("dragstart", DragStart);
      function DragStart(e) {
        this.classList.add("hold");
      }
      // 拖拽結(jié)束事件
      fill.addEventListener("dragend", DragEnd);
      function DragEnd(e) {
        this.classList.remove("hold");
      }

      const empty = document.querySelectorAll(".empty");
      empty.forEach((item) => {
        // 經(jīng)過事件
        item.addEventListener("dragover", DragOver);
        // 進入事件
        item.addEventListener("dragenter", DragEnter);
        // 離開事件
        item.addEventListener("dragleave", DragLeave);
        // 拖拽結(jié)束事件
        item.addEventListener("drop", Drop);
      })
      // 拖拽經(jīng)過事件
      function DragOver(e) {
        // 阻止默認(rèn)事件
        e.preventDefault();
        console.log("拖拽經(jīng)過");
      }
      // 拖拽進入事件
      function DragEnter(e) {
        console.log("拖拽進入");
        this.classList.add("hovered");
      }
      // 拖拽離開事件
      function DragLeave(e) {
        console.log("拖拽離開");
        this.classList.remove("hovered");
      }
      // 拖拽結(jié)束事件
      function Drop(e) {
        console.log("拖拽結(jié)束");
        this.className = "empty";
        this.append(fill);
      }
    </script>
  </body>
</html>

到此這篇關(guān)于使用JavaScript輕松實現(xiàn)拖拽功能的文章就介紹到這了,更多相關(guān)JavaScript拖拽功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論