四时宝库

程序员的知识宝库

2024年09月02日

七爪源码:如何使用 Vanilla JavaScript 创建拖放元素?

使用 JavaScript 创建拖放效果

介绍

您是否在任何网站或应用程序中看到必须将一个元素从一个地方移动到另一个地方？一个元素可能是图像、文本、视频等。你最常在编辑器中看到这种类型的功能（可能是它的网站、应用程序或软件）。

您想在您的网站中构建这种类型的功能吗？如果您不知道如何构建它也没问题，因为在本文中，您将学习使用简单的 JavaScript 创建此效果。我们将看到的要点，

  • 什么是拖放？
  • 如何使用简单的 JavaScript 制作拖放效果？
  • 用 HTML、CSS 和 JavaScript 编码
  • 最后结果
  • 结论

所以，让我们开始吧，不要再耽误时间了！


什么是拖放？

拖放只是将元素从一个地方移动到另一个地方的过程。用户可以通过按下鼠标按钮来选择可拖动元素并通过释放鼠标按钮将该元素拖动到可放置元素中。这种效果只不过是拖放效果。


如何使用简单的 JavaScript 制作拖放效果？

使用 JavaScript 的拖动事件，我们可以让它变得更容易。 JavaScript 提供了许多与拖放 HTML DOM 元素相关的功能。比如dragstart、dragend、dragover、drop等。别担心，我们会在代码中用到这些函数，我会为你讲解。


废话少说，我们来写代码：

我将展示 HTML、CSS 和 JavaScript 的单独代码，最后，我将展示整个代码。


HTML 代码

在 HTML 中，我们什么也没做。刚刚创建了一个容器，在容器里面，我们添加了多个div。一个用于图像（可拖动元素），另一个用于我们的可放置元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag and Drop Effect using HTML, CSS, and JavaScript</title>
    <style></style>
</head>

<body>

    <div class="container">
        <div class="whiteBox" id="box">
            <div class="imgBox" draggable="true"></div>
        </div>
        <div class="whiteBox" id="box"></div>
        <div class="whiteBox" id="box"></div>
        <div class="whiteBox" id="box"></div>
        <div class="whiteBox" id="box"></div>
    </div>
    
    <script></script>
</body>

</html>

CSS 代码

我们将样式应用于我们的 HTML 元素，如容器、imgBox、whiteBox 等。

* {
  margin: 0px;
  padding: 0px;
}
body {
  background-color: black;
  height: 100vh;
  width: 100%;
}
.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  height: 100vh;
  width: 100%;
}
.whiteBox {
  width: 150px;
  height: 150px;
  background-color: white;
  border: none;
  border-radius: 50%;
}
.imgBox {
  background: url("https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=874&q=80") no-repeat center center;
  height: 100%;
  width: 100%;
  background-size: cover;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.hold {
  border: 4px solid white;
}
.hide {
  display: none;
}

JavaScript 代码

// Access the HTML Elements
let imgBox = document.querySelector(".imgBox");
let whiteBoxes = document.getElementsByClassName("whiteBox");

// When user start to drag the element ( Here, imgBox )
// Event listeners for dragable imgBox element
imgBox.addEventListener("dragstart", (e) => {

  e.target.className += " hold";
  
  setTimeout(() => {
    e.target.className = "hide";
  }, 0);
  
});

// When user ready to drop the element 
imgBox.addEventListener("dragend", (e) => {
  e.target.className = " imgBox";
});

// Iterate all the white boxes
for (Boxes of whiteBoxes) {
  Boxes.addEventListener("dragover", (e) => {
    e.preventDefault();
  });

  Boxes.addEventListener("drop", (e) => {
    e.target.append(imgBox);
  });
}

这个 JavaScript 代码是如何工作的？

  • 在顶部，我们访问了 HTML 元素（一个是我们的 imgBox，第二个是我们所有的五个 whiteBox）
  • 然后使用 addEventListener()，我们在 imgBox 上应用了 dragStart 效果。当用户开始拖动元素时发生此事件。在这个箭头函数中，当用户开始拖动元素时，我们会在该元素上添加名为“hold”的新类。之后在我们设定的时间限制内，我们又添加了一个名为“隐藏”的类。
  • 现在，是时候添加我们的最后一个 addEventListener() 来实现下降效果了。当用户开始放置元素时，我们添加了一个名为“imgBox”的类。请注意，在样式中，我们应用了所有类的 CSS。
  • 现在。我们将 for 循环放在这里以访问我们在用户开始放置元素时创建的所有白框。我们将 addEventListener() 放在 imgBox 上以获得拖动效果。当拖动的元素在放置目标上方时发生此事件。在其中，我们给出了函数 preventDefault()。它会阻止元素的默认操作发生。
  • imgBox 上的第二个 addEventListener() 用于放置效果。当拖动的元素放在放置目标上时发生该事件。在这里，我们将 imgBox（可拖动元素）拖放或附加到用户拖放的可拖放元素中。

这就是此 JavaScript 代码或拖放效果背后的逻辑的工作方式。我希望你明白。这就是你的整个代码的样子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Drag and Drop Effect in JavaScript</title>

    <!-- Add some CSS Code -->
    <style>
      * {
        margin: 0px;
        padding: 0px;
      }
      body {
        background-color: black;
        height: 100vh;
        width: 100%;
      }
      .container {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        height: 100vh;
        width: 100%;
      }
      .whiteBox {
        width: 150px;
        height: 150px;
        background-color: white;
        border: none;
        border-radius: 50%;
      }
      .imgBox {
        background: url("https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=874&q=80") no-repeat center center;
        height: 100%;
        width: 100%;
        background-size: cover;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: grid;
        place-items: center;
      }
      .hold {
        border: 4px solid white;
      }
      .hide {
        display: none;
      }
    </style>
  </head>
  <body>

    <div class="container">
      <div class="whiteBox" id="box">
        <div class="imgBox" draggable="true"></div>
      </div>
      <div class="whiteBox" id="box"></div>
      <div class="whiteBox" id="box"></div>
      <div class="whiteBox" id="box"></div>
      <div class="whiteBox" id="box"></div>
    </div>

    <!-- Let's start to write script -->
    <script>

      // Access the HTML Elements
      let imgBox = document.querySelector(".imgBox");
      let whiteBoxes = document.getElementsByClassName("whiteBox");


      // When user start to drag the element ( Here, imgBox )
      // Event listeners for dragable imgBox element
      imgBox.addEventListener("dragstart", (e) => {

        e.target.className += " hold";
        setTimeout(() => {
          e.target.className = "hide";
        }, 0);
      });

      // When user ready to drop the element 
      imgBox.addEventListener("dragend", (e) => {
        e.target.className = " imgBox";
      });

      // Iterate all the white boxes
      for (Boxes of whiteBoxes) {
        Boxes.addEventListener("dragover", (e) => {
          e.preventDefault();
        });

        Boxes.addEventListener("drop", (e) => {
          e.target.append(imgBox);
        });
      }
    </script>
  </body>
</html>

您将得到的最终结果

这就是使用简单 JavaScript 制作 Drop-and-Drop 元素的方法。 我希望你喜欢它。


结论

我们在本文中学习了使用 JavaScript 创建拖放元素。 我们终于看到了代码及其结果。 现在，您可以为您的网站制作更多令人惊叹的拖放功能。

关注七爪网，获取更多APP/小程序/网站源码资源！

标签：dragend 

作者:sishi88 , 分类:技术教程 , 浏览:8 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言
    友情链接