HTML und CSS Frage?

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet
CyborgBeta
25.10.2023, 18:08

Hallo, ich habe deinen Code mal aufgeräumt und das CSS direkt in das HTML eingebunden.

Du brauchst dafür auf jeden Fall ein kleines JavaScript-Schnippsel ...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flexbox</title>
    <!-- <link rel="stylesheet" href="../CSS/style.css"> -->
    <style>
      * {
        margin: 0;
        box-sizing: border-box;
      }
      header {
        background-color: #cae1fc;
      }
      .layout2 {
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
      }
      .container {
        height: 150px;
        width: 1425px;
        background-color: rgb(80, 98, 104);
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      div ul {
        width: 100%;
      }
      div li {
        display: flex;
        justify-content: space-around;
        align-items: center;
        list-style: none;
      }
      .item {
        background-color: rgb(39, 185, 171);
        width: 120px;
        height: 50px;
        color: #fff;
        font-weight: bold;
        font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
        font-size: large;
        display: flex;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        text-decoration: none;
      }
      .item1 {
        background-color: rgb(193, 67, 67);
        width: 115px;
        height: 50px;
        color: #fff;
        font-weight: bold;
        font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
        font-size: large;
        display: flex;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        text-decoration: none;
      }
      .item2 {
        background-color: rgb(112, 29, 189);
        width: 80px;
        height: 90px;
        color: #fff;
        font-weight: bold;
        font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
        font-size: small;
        display: flex;
        text-align: center;
        justify-content: center;
        flex-direction: column;
        text-decoration: none;
      }
      .layout2 > nav {
        height: 100vh;
      }
      nav {
        display: flex;
        align-items: flex-end;
        max-height: 170px;
      }
      /**/
      .layout4 {
        background-color: #cae1fc;
      }
      .laayout2 {
        height: 1000px;
        display: flex;
        justify-content: space-around;
      }
      .sectionone {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        max-height: 345px;
        width: 270px;
      }
      .content1 {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 20px;
        background-color: #cae1fc;
      }
      .border {
        background-color: #fff;
        width: 225px;
        height: 45px;
      }
      .border1 {
        background-color: #fff;
        width: 225px;
        height: 45px;
      }
      .border2 {
        background-color: #fff;
        width: 225px;
        height: 45px;
      }
      .border3 {
        background-color: #fff;
        width: 225px;
        height: 45px;
      }
      .border4 {
        background-color: #fff;
        width: 225px;
        height: 45px;
      }
      .brownhelp {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        max-height: 345px;
        width: 1200px;
      }
      .brownbox {
        background-color: burlywood;
        width: 1150px;
        height: 305px;
      }
      /*YELLOW*/
      .laayout3 {
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        height: auto;
      }
      .sectiontwo {
        display: flex;
        width: 800px;
        justify-content: space-around;
        align-items: center;
      }
      .content2 {
        display: flex;
        justify-content: space-around;
        gap: 200px;
      }
      .box {
        background-color: yellow;
        width: 200px;
        height: 190px;
      }
      .box2 {
        background-color: green;
        width: 200px;
        height: 190px;
      }
      .box3 {
        background-color: yellow;
        width: 200px;
        height: 190px;
      }
      .box4 {
        background-color: green;
        width: 200px;
        height: 190px;
      }
    </style>
  </head>
  <body>
    <header>
      <div class="layout2">
        <nav>
          <div class="container">
            <ul>
              <li>
                <div class="draggable" draggable="true"><a class="item" href="#">LOGO</a></div>
                <div class="draggable" draggable="true"><a class="item" href="#">Menu 1</a></div>
                <div class="draggable" draggable="true"><a class="item" href="#">Menu 2</a></div>
                <div class="draggable" draggable="true"><a class="item" href="#">Menu 3</a></div>
                <div class="draggable" draggable="true"><a class="item" href="#">Button</a></div>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </header>
    <main>
      <div class="layout4">
        <div class="laayout2">
          <div class="brownhelp">
            <div class="brownbox" id="droptarget0">
              <nav>
                <div class="container">
                  <ul>
                    <li id="droptarget1"></li>
                  </ul>
                </div>
              </nav>
            </div>
          </div>
          <div class="sectionone">
            <div class="content1">
              <div class="border"></div>
              <div class="border1"></div>
              <div class="border2"></div>
              <div class="border3"></div>
              <div class="border4"></div>
            </div>
          </div>
        </div>
        <div class="laayout3">
          <div class="sectiontwo">
            <div class="content2">
              <div class="box"></div>
              <div class="box2"></div>
              <div class="box3"></div>
              <div class="box4"></div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <script>
      let dragged = null;

      const items = document.getElementsByClassName("draggable");
      for (let i = 0; i < items.length; i++) {
        items[i].addEventListener("dragstart", (event) => {
          dragged = event.target;
        });
      }

      const target = document.getElementById("droptarget0");
      target.addEventListener("dragover", (event) => {
        // prevent default to allow drop
        event.preventDefault();
      });
      target.addEventListener("drop", (event) => {
        // prevent default action (open as link for some elements)
        event.preventDefault();
        if (event.target.id === "droptarget0") {
          dragged.parentNode.removeChild(dragged);
          document.getElementById("droptarget1").appendChild(dragged);
        }
      });
    </script>
  </body>
</html>

Weiteres dazu dann hier: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event
Woher ich das weiß:eigene Erfahrung