Day-21 드래그앤드롭

5366 단어 day21javascript50projects50days
안녕 여러분,

프로젝트에 들어가기 전에 나에 대한 약간의 소개:

저는 사비야 타바숨입니다. 저는 CSE 전공으로 B.Tech를 마쳤습니다. 저는 현재 React를 배우고 있으며 최근에 50 Projects 50 Days 챌린지를 시작했습니다. 저와 협업할 질문/아이디어가 있으면 제 소셜 미디어 핸들에서 저와 연결할 수 있습니다.

드래그앤드롭 프로젝트로 렛츠고!!


우리 프로젝트의 결과물에 대한 간략한 설명:


위의 이미지에서 상자가 몇 개 있다는 아이디어를 얻을 수 있습니다. 이 상자 중 하나의 상자에 이미지가 있습니다. 이미지를 드래그하여 아무 상자에나 놓을 수 있습니다.

사용 중인 기술 스택: HTML, CSS, JS

📌HTML 코드:

<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>
</body>

HTML 코드에 대한 자세한 설명:
  • 출력에 따르면 최소 4-5개의 상자가 필요합니다. 따라서 내부에 빈 클래스가 있는 4-5개의 태그를 생성합니다.
  • 상자에 있는 이미지의 경우 빈 태그 안에 다른 이미지를 만듭니다. 그리고 draggable="true"속성을 추가합니다.

  • draggable="true": draggable 속성은 다음을 지정합니다.
    요소를 드래그할 수 있는지 여부.

    • 📌CSS 코드:

       @import url("https://fonts.googleapis.com/css2? 
   family=Roboto:wght@400;700&display=swap");
   * {
      box-sizing: border-box;
   }
   body {
      font-family: "Roboto", sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      margin: 0;
      height: 100vh;
   }
 .empty {
      height: 150px;
      width: 150px;
      margin: 10px;
      border: solid 3px black;
      background: white;
   }
.fill {
     background-image:
          url("https://source.unsplash.com/random/150x150");
     width: 145px;
     height: 145px;
   }
.hold {
     border: 3px solid red;
   }
.hovered {
     background-color: black;
     border-color: rgb(32, 230, 32);
     border-style: dashed;
   }
 @media (max-width: 480px) {
     body {
          flex-direction: column;
     }
 }
    CSS 코드에 대한 자세한 설명:
  • 요소의 가운데 맞춤: 다음과 같은 속성을 추가합니다.
  • display:flex - 항목 모음을 하나에 배치합니다.
    방향 또는 다른.

  • align-items:center - 항목을 중앙에 맞춥니다.

  • justify-content:center - 유연한 정렬
    컨테이너의 항목을 중앙에 배치합니다.

  • height:100vh - 페이지의 전체 높이

  • overflow: hidden - 이 속성은 페이지를
    스크롤할 수 없습니다.

  • 빈 클래스의 스타일을 지정하려면 다음을 수행하십시오.
  • 상자의 높이와 너비를 지정합니다.
  • 배경색 및 테두리 속성을 추가합니다.

  • 채우기 클래스의 스타일을 지정하려면 다음을 수행하십시오.
  • 배경 이미지 및 높이, 너비 추가
    이미지에 대한 속성입니다.

  • 스타일을 추가하여 JS에서 추가로 생성될 클래스 및 호버 클래스를 유지합니다.

  • 보류 클래스 스타일 지정 - 상자에서 이미지를 끌 때 이미지 주위에 효과를 만듭니다.

  • hovered 클래스 스타일링 - 이미지가 다른 상자 위에 있을 때 효과를 만듭니다.

  • Atlast, 반응형 미디어 쿼리 추가 😊

    • 📌JS 코드:
      const fill = document.querySelector(".fill");
  const empties = document.querySelectorAll(".empty");

  fill.addEventListener("dragstart", dragStart);
  fill.addEventListener("dragend", dragEnd);

  empties.forEach((empty) => {
      empty.addEventListener("dragover", dragOver);
      empty.addEventListener("dragenter", dragEnter);
      empty.addEventListener("dragleave", dragLeave);
      empty.addEventListener("drop", dragDrop);
  });

  function dragStart() {
      this.className += " hold"; //append the hold class here
      setTimeout(() => (this.className = "invisible"), 0);
  }

  function dragEnd() {
      this.className = "fill";
  }

  function dragOver(e) {
      e.preventDefault();
  }

  function dragEnter(e) {
      e.preventDefault();
      this.className += " hovered"; //append hovered class 
                         here while entering into the box.
  }

  function dragLeave() {
      this.className = "empty";
  }

  function dragDrop() {
      this.className = "empty";
      this.append(fill);
  }
    JS 코드에 대한 자세한 설명:
  • 먼저 DOM을 만들고 있는 변수를 만듭니다.
    변화.
  • 채우기 상자에는 dragStart와 두 가지 기능이 있습니다.
    드래그엔드
  • 빈 상자에는 dragOver, dragEnter,
    dragLeave, 드롭 기능.
  • 이러한 기능은 드래그에 대한 아이디어를 제공하는 데 도움이 됩니다.
    및 드롭 작업.
  • 각각의 클래스 즉, 비어 있음, 채우기를 추가해야 합니다.
    각 상자에서 드래그 앤 드롭을 수행하는 동안 클래스.

    • 마지막으로 출력의 라이브 데모는 다음과 같습니다.




    깃허브 링크: sabiya tabassum / Day-21-드래그 앤 드롭 21일차 드래그 앤 드롭. CodeSandbox로 생성 Day-21-드래그 앤 드롭 CodeSandbox로 생성 GitHub에서 보기



    에서 연결해 주세요



    프로젝트가 마음에 드셨기를 바랍니다!!

    오늘의 동기부여:



        When you're high on emotion
    And you're losing your focus
    And you feel too exhausted to pray
    Don't get lost in the moment
    Or give up when you're closest
    All you need is somebody to say
    It's okay not to be okay
    It's okay not to be okay
    When you're down and you feel ashamed
    IT'S OK NOT TO BE OK!!
    주파수 변조
    댄스

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage