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

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

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

效果展示

實(shí)現(xiàn)

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

通過(guò)去開(kāi)啟dragstart監(jiān)聽(tīng)拖放操作事件就能實(shí)現(xiàn)圖片的拖動(dòng)

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

本例子中我們對(duì)fill盒子開(kāi)啟了draggable事件，fill盒子是用來(lái)存照片的

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

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

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

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

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

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

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

首先通過(guò)類(lèi)名獲取所有的 .empty 元素

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

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

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

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

  • DragOver 函數(shù)：

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

  • DragEnter 函數(shù)：

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

  • DragLeave 函數(shù)：

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

  • Drop 函數(shù)：

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

最終就能實(shí)現(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");
      // 拖拽開(kāi)始事件
      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)過(guò)事件
        item.addEventListener("dragover", DragOver);
        // 進(jìn)入事件
        item.addEventListener("dragenter", DragEnter);
        // 離開(kāi)事件
        item.addEventListener("dragleave", DragLeave);
        // 拖拽結(jié)束事件
        item.addEventListener("drop", Drop);
      })
      // 拖拽經(jīng)過(guò)事件
      function DragOver(e) {
        // 阻止默認(rèn)事件
        e.preventDefault();
        console.log("拖拽經(jīng)過(guò)");
      }
      // 拖拽進(jìn)入事件
      function DragEnter(e) {
        console.log("拖拽進(jìn)入");
        this.classList.add("hovered");
      }
      // 拖拽離開(kāi)事件
      function DragLeave(e) {
        console.log("拖拽離開(kāi)");
        this.classList.remove("hovered");
      }
      // 拖拽結(jié)束事件
      function Drop(e) {
        console.log("拖拽結(jié)束");
        this.className = "empty";
        this.append(fill);
      }
    </script>
  </body>
</html>

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

相關(guān)文章

最新評(píng)論