Day-21 Drag N Drop
Tags: javascript, 50projects50days, day21
Published: 2021-06-17 06:17:22

Hi Folks,

Before diving into the project, a little bit of **introduction** about me:

  I am **Sabiya Tabassum**. I completed my B.Tech under CSE major. I'm currently learning React and recently, I have started 50 Projects 50 Days challenge. If you have any queries/ ideas to collaborate with me, you can connect with me at my social media handles.

Coming to our __Drag N Drop Project__, Let's Go!!
![Let's Go](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5wvavf7rdr8m3lwv1i6.gif)


Glimpse of the __output__ of our project:
{% codesandbox Day-21-Drag-N-Drop-d6qi5 %}

From the above image, we can get an idea that there are some boxes. Out of these boxes, one box have an image. We can drag the image and drop in any of the boxes.

**Tech stack** we are using: HTML,CSS, JS

📌__HTML code:__

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

__Detailed Explanation of HTML code:__
   
- According to the output, we need atleast 4-5 boxes. So we create 4-5 <div> tags with an empty class inside it.
- For a image in the box, we create another <div> inside the empty <div> tag. And add an attribute **draggable="true"**.
- **draggable="true"**: The __draggable__ attribute specifies 
whether an element is draggable or not.

📌**CSS code:**

       @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;
         }
     }


__Detailed explanation of CSS code:__

- For **Centering of elements**: Add properties like,
     - display:flex - To lay a collection of items out in one 
                      direction or another.
     - **align-items:center** - Centering the items.
     - **justify-content:center** - Aligns the flexible 
                      container's items to center.
     - **height:100vh** - The page's overall height
     - **overflow: hidden** - This property makes the page 
                      unscrollable.
- For **styling the empty class**:
    - Specify **height** and **width** of the box.
    - Add **background-color** and **border** properties.
- For **styling the fill class**: 
    - Add **background-image** and **height**, **width** 
      properties for the image.
- Add styling to hold class and hovered class which will be created further in JS.
   - **hold class styling** - To create an effect around the image, when the image is dragged from the box. 
   - **hovered class styling** - To create an effect when the image is hovering on other boxes.
- Atlast, Add some responsive media queries 😊 

📌**JS code:**

      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);
      }


__Detailed explanation of JS code:__

   - Firstly, create the variables on which we are making DOM 
     changes.
   - On Fill box, we have two functions **dragStart** and 
     **dragEnd**
   - On Empty box, we have **dragOver**, **dragEnter**, 
     **dragLeave**, **drop** functions.
   - These functions are helpful in giving you an idea on drag 
     and drop operations.
   - We have to append the respective classes i.e., empty, fill 
     classes while performing drag and drop on respective boxes.

##Finally, the **Live demo** of __output__ will be:

{% codesandbox Day-21-Drag-N-Drop-d6qi5 %}


####Github Link: {% github sabiyatabassum/Day-21-Drag-N-Drop %}

####Connect me at https://twitter.com/nerd_fswd

__Hope you liked the project!!__

####Today's Pinch of Motivation:

        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!!