Search code examples
javascripthtmldrag-and-drop

Show a hidden div after an event is finished javascript

I have a code block

<div class="banner-area">
      <div class="banner-area__text">
        <span class="banner-area__green">Place</span>
        <span class="banner-area__red">Images</span>
      </div>
      <div class="map">
        <div
          id="container"
          ondrop="drop(event)"
          ondragover="allowDrop(event)"
          class="map1"
        ></div>
        <div
          id="container"
          ondrop="drop(event)"
          ondragover="allowDrop(event)"
          class="map2"
        ></div>
        <div
          id="container"
          ondrop="drop(event)"
          ondragover="allowDrop(event)"
          class="map3"
        ></div>
        <div
          id="container"
          ondrop="drop(event)"
          ondragover="allowDrop(event)"
          class="map4"
        ></div>
      </div>
      <div class="image-area">
        <div id="container" ondrop="drop(event)" ondragover="allowDrop(event)">
          <img
            src="./img/hatirjheel.png"
            alt="hatirjheel"
            class="small-image"
            id="image1"
            draggable="true"
            ondragstart="drag(event)"
          />
        </div>
        <div id="container" ondrop="drop(event)" ondragover="allowDrop(event)">
          <img
            src="./img/jamuna.png"
            alt="hatirjheel"
            class="small-image"
            id="image2"
            draggable="true"
            ondragstart="drag(event)"
          />
        </div>
        <div id="container" ondrop="drop(event)" ondragover="allowDrop(event)">
          <img
            src="./img/padma.png"
            alt="hatirjheel"
            class="small-image"
            id="image3"
            draggable="true"
            ondragstart="drag(event)"
          />
        </div>
        <div id="container" ondrop="drop(event)" ondragover="allowDrop(event)">
          <img
            src="./img/ruppur.png"
            alt="hatirjheel"
            class="small-image"
            id="image4"
            draggable="true"
            ondragstart="drag(event)"
          />
        </div>
      </div>
    </div>

    <div class="banner-area-2" id="div1">
      <div class="text-area">
        <div class="text-1 anime-text">
          <span class="word">Hi</span>
        </div>
        <div class="text-2 anime-text-1">
          <span class="word">There</span>
        </div>
        <div class="text-3 anime-text-2">
          <span class="word">Mr. John</span>
        </div>
      </div>
    </div>

There are some javascript functions which allows the images from image-area class to be dropped in the map class

function drag(evt) {
  evt.dataTransfer.setData("image", evt.target.id);
}

function drop(evt) {
  evt.preventDefault();
  var data = evt.dataTransfer.getData("image");
  var image = document.getElementById(data);
  evt.target.appendChild(image);
}

function allowDrop(evt) {
  evt.preventDefault();
}

In this current implementation banner-area and banner-area-2 both divs are visible. I want to hide this banner-area-2 div initially and show it when all the images from image-area is dragged to the map class and also hide banner-area using javascript.

Here is the CSS file:

body {
  background: #fff;
  margin: 0;
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#container {
  width: 30px;
  height: 30px;
}

#image {
  height: auto;
  width: auto;
}

.banner-area {
  width: 300px;
  height: 250px;
  background-image: url("../img/default.png");
  background-color: #cccccc;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  box-sizing: border-box;
  padding: 10px;
}

.banner-area__text {
  text-align: center;
}

.banner-area__green {
  color: green;
}

.banner-area__red {
  color: red;
}

.map {
  width: 115px;
  height: 156px;
  display: block;
  margin: 0 auto;
  position: relative;
  top: 15px;
}

.map1 {
  position: absolute;
  top: 10px;
  left: 10px;
}

.map2 {
  position: absolute;
  top: 35px;
  right: 25px;
}

.map3 {
  position: absolute;
  bottom: 30px;
  right: 10px;
}

.map4 {
  position: absolute;
  bottom: 30px;
  left: 20px;
}

.image-area {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.image-area div {
  margin: 0 10px;
}

.banner-area-2 {
  width: 300px;
  height: 250px;
  background-image: url("../img/final.png");
  background-color: #cccccc;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-area {
  text-align: center;
  transform: rotate(355deg);
  position: absolute;
  top: 80px;
  color: white;
}

.text-1 {
  background-image: url("../img/green2.png");
}

.text-2 {
  background-image: url("../img/red.png");
}

.text-3 {
  background-image: url("../img/green1.png");
}

.anime-text,
.anime-text-1,
.anime-text-2,
.word {
  display: block;
  line-height: 1em;
  margin-bottom: 7px;
}
Solution

  • first you should hide banner-area-2 on loading your application then you need to make sure to show it only when image-area has no images left.

    It's pretty simple code which checks every time your drop an image to map area and when there are no more images left then it shows the banner-area-2.

    document.getElementsByClassName('banner-area-2')[0].style.display = 'none';
let imagespacechildren = document.getElementsByClassName('image-area')[0].children

function drag(evt) {
  evt.dataTransfer.setData("image", evt.target.id);
}


function drop(evt) {
  evt.preventDefault();
  var data = evt.dataTransfer.getData("image");
  var image = document.getElementById(data);
  evt.target.appendChild(image);
  let numberofImageLeft = countImages();
  if (numberofImageLeft === 0) {
    document.getElementsByClassName('banner-area-2')[0].style.display = 'block';
  }
}

function countImages() {
  let count = 0
  for (let i = 0; i < imagespacechildren.length; i++) {
    count +=
      imagespacechildren[i].childElementCount;
  }
  return count;
}

function allowDrop(evt) {
  evt.preventDefault();
}
    body {
  background: #fff;
  margin: 0;
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#container {
  width: 30px;
  height: 30px;
}

#image {
  height: auto;
  width: auto;
}

.banner-area {
  width: 300px;
  height: 250px;
  background-image: url("../img/default.png");
  background-color: #cccccc;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  box-sizing: border-box;
  padding: 10px;
}

.banner-area__text {
  text-align: center;
}

.banner-area__green {
  color: green;
}

.banner-area__red {
  color: red;
}

.map {
  width: 115px;
  height: 156px;
  display: block;
  margin: 0 auto;
  position: relative;
  top: 15px;
}

.map1 {
  position: absolute;
  top: 10px;
  left: 10px;
}

.map2 {
  position: absolute;
  top: 35px;
  right: 25px;
}

.map3 {
  position: absolute;
  bottom: 30px;
  right: 10px;
}

.map4 {
  position: absolute;
  bottom: 30px;
  left: 20px;
}

.image-area {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.image-area div {
  margin: 0 10px;
}

.banner-area-2 {
  width: 300px;
  height: 250px;
  background-image: url("../img/final.png");
  background-color: #cccccc;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-area {
  text-align: center;
  transform: rotate(355deg);
  position: absolute;
  top: 80px;
  color: white;
}

.text-1 {
  background-image: url("../img/green2.png");
}

.text-2 {
  background-image: url("../img/red.png");
}

.text-3 {
  background-image: url("../img/green1.png");
}

.anime-text,
.anime-text-1,
.anime-text-2,
.word {
  display: block;
  line-height: 1em;
  margin-bottom: 7px;
}
    <div class="banner-area">
  <div class="banner-area__text">
    <span class="banner-area__green">Place</span>
    <span class="banner-area__red">Images</span>
  </div>
  <div class="map">
    <div id="container" ondrop="drop(event)" ondragover="allowDrop(event)" class="map1"></div>
    <div id="container" ondrop="drop(event)" ondragover="allowDrop(event)" class="map2"></div>
    <div id="container" ondrop="drop(event)" ondragover="allowDrop(event)" class="map3"></div>
    <div id="container" ondrop="drop(event)" ondragover="allowDrop(event)" class="map4"></div>
  </div>
  <div class="image-area">
    <div id="container1" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img src="./img/hatirjheel.png" alt="hatirjheel" class="small-image" id="image1" draggable="true" ondragstart="drag(event)" />
    </div>
    <div id="container2" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img src="./img/jamuna.png" alt="hatirjheel" class="small-image" id="image2" draggable="true" ondragstart="drag(event)" />
    </div>
    <div id="container3" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img src="./img/padma.png" alt="hatirjheel" class="small-image" id="image3" draggable="true" ondragstart="drag(event)" />
    </div>
    <div id="container4" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img src="./img/ruppur.png" alt="hatirjheel" class="small-image" id="image4" draggable="true" ondragstart="drag(event)" />
    </div>
  </div>
</div>

<div class="banner-area-2" id="div1">
  <div class="text-area">
    <div class="text-1 anime-text">
      <span class="word">Hi</span>
    </div>
    <div class="text-2 anime-text-1">
      <span class="word">There</span>
    </div>
    <div class="text-3 anime-text-2">
      <span class="word">Mr. John</span>
    </div>
  </div>
</div>