TheLazy.Dev
Portfolio GitHub

Blog

javascript |50projects50days |day21

Day-21 Drag N Drop

sabiyatabassum

Sabiya Tabassum

Posted on June 17, 2021

Day-21 Drag N Drop

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

Glimpse of the output of our project:

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>
Enter fullscreen mode Exit fullscreen mode

Detailed Explanation of HTML code:

  • According to the output, we need atleast 4-5 boxes. So we create 4-5 tags with an empty class inside it.
  • For a image in the box, we create another inside the empty 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:

Github Link:

GitHub logo nerdfswd / Day-21-Drag-N-Drop

Day-21 Drag N Drop. Created with CodeSandbox

Day-21-Drag-N-Drop

Created with CodeSandbox

View on GitHub

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!!
šŸ’– šŸ’Ŗ šŸ™… šŸš©
sabiyatabassum
Sabiya Tabassum

Posted on June 17, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Day-21 Drag N Drop
javascript Day-21 Drag N Drop

June 17, 2021