How to add effect to drag and drop elements in java script

Question

I have created a short exercise that involves 3 boxes that are attributed to certain shapes. I have it set now that if someone drags the shape to the correct box it is places in the box. However, currently if someone drags a shape to the wrong shape it only resets. I would like to add some effects such as, if the person drags to the wrong one it resets and a red flash appears on in the box, and if correct a green one appears. If possible it would be nice to be able to also have the red flash appear even if the person adds it to the correct box, but after the specified number such as a third triangle in the triangle box. How would this be done ? This is my current code

var circ = document.getElementById("c1");
var tria = document.getElementById("t1");
var squa = document.getElementById("s1");
var circ2 = document.getElementById("c2");
var tria2 = document.getElementById("t2");
var squa2 = document.getElementById("s2");
var dropt = document.getElementById("dzt");
var dropc = document.getElementById("dzc");
var drops = document.getElementById("dzs");

circ.ondragstart = function(evt) {
  evt.dataTransfer.setData('key1', evt.target.id);
  console.log("dragging circle");
}
tria.ondragstart = function(evt) {
  evt.dataTransfer.setData('key2', evt.target.id);
  console.log("dragging triangle");
}
squa.ondragstart = function(evt) {
  evt.dataTransfer.setData('key3', evt.target.id);
  console.log("dragging square");
}
/*circ2.ondragstart = function(){
    evt.dataTransfer.setData('key4','c2');
    console.log("yesh");
}
tria2.ondragstart=function(){
   evt.dataTransfer.setData('key5','t2');
   console.log("nani"); 
}
squa2.ondragstart=function(){
   evt.dataTransfer.setData('key6','s1');    
   console.log("omae wa");
}
*/
dropt.ondragover = function(evt) {
  evt.preventDefault();
  console.log("over t");
}
dropc.ondragover = function(evt) {
  evt.preventDefault();
  console.log("over c");
}
drops.ondragover = function(evt) {
  evt.preventDefault();
  console.log("over s");
}
dropt.ondrop = function(evt) {
  evt.preventDefault();
  var icont = evt.dataTransfer.getData('key2');
  console.log("drop t");
  console.log(icont);
  var current = document.getElementById(icont);
  console.log(current);
  var newcurrent = document.createElement('img');
  newcurrent.src = current.src;
  dropt.appendChild(newcurrent);
}
dropc.ondrop = function(evt) {
  evt.preventDefault();
  var iconc = evt.dataTransfer.getData('key1');
  console.log("drop c");
  console.log(iconc);
  var current = document.getElementById(iconc);
  console.log(current);
  var newcurrent = document.createElement('img');
  newcurrent.src = current.src;
  dropc.appendChild(newcurrent);
}
drops.ondrop = function(evt) {
  evt.preventDefault();
  var icons = evt.dataTransfer.getData('key3');
  console.log("drop s");
  console.log(icons);
  var current = document.getElementById(icons);
  console.log(current);
  var newcurrent = document.createElement('img');
  newcurrent.src = current.src;
  drops.appendChild(newcurrent);
}

#body {
  width: 100%;
  height: 100%;
}

.container {
  display: flex;
}

.column {
  flex: 1;
  background: #ffffff;
  border: 1px solid #ffffff;
  box-sizing: border-box;
}

.column-one {
  order: 3;
}

.column-two {
  order: 1;
}

.column-three {
  order: 4;
}

.column-four {
  order: 2;
}

.column-five {
  order: 5;
}

.drop-zone1 {
  align-content: center;
  width: 150px;
  height: 150px;
  border: 2px;
  border-style: solid;
  border-color: #535f6b;
}

.drop-zone2 {
  align-content: center;
  width: 150px;
  height: 150px;
  border: 2px;
  border-style: solid;
  border-color: #535f6b;
}

.drop-zone3 {
  align-content: center;
  width: 150px;
  height: 150px;
  border: 2px;
  border-style: solid;
  border-color: #535f6b;
}

.icon1 {
  width: 50px;
  height: 50px;
  margin-left: 45px;
}

.icon2 {
  width: 50px;
  height: 50px;
  margin-left: 56px;
  align-content: center;
}

.icon3 {
  width: 50px;
  height: 50px;
  margin-left: 58px;
}

.question {
  text-align: center;
  color: #535f6b;
  font-family: sans-serif;
  font-style: italic;
}

Drag and drop the elements to their corresponding set to achieve: 
a. 3 circles in the circle set
b. 2 triangles in the triangle set
c. 5 squares in the square set

This is what it looks like with the images Thanks in advance and best regards

Bourbia Brahim · Accepted Answer

In the below snippet I've added some condition to check if the object was dragged in its area, if so , I added the class that has an animation background ( annimation created at bottom ) otherwise it will check if the drag area has child ( do not trigger error annimation , else trigger the error annimation )

you can set your own annimation and colors by changing the both css annimations and the css class .green and .red see below snippet

var circ = document.getElementById("c1");
var tria = document.getElementById("t1");
var squa = document.getElementById("s1");

var circ2 = document.getElementById("c2");
var tria2 = document.getElementById("t2");
var squa2 = document.getElementById("s2");

var dropt = document.getElementById("dzt");
var dropc = document.getElementById("dzc");
var drops = document.getElementById("dzs");

tria.ondragstart = function(evt) {
  evt.dataTransfer.setData('key2', evt.target.id);
  console.log("dragging triangle");
}

circ.ondragstart = function(evt) {
  evt.dataTransfer.setData('key1', evt.target.id);
  console.log("dragging circle");
}

squa.ondragstart = function(evt) {
  evt.dataTransfer.setData('key3', evt.target.id);
  console.log("dragging square");
}
/*circ2.ondragstart = function(){
    evt.dataTransfer.setData('key4','c2');
    console.log("yesh");
}
tria2.ondragstart=function(){
   evt.dataTransfer.setData('key5','t2');
   console.log("nani"); 
}
squa2.ondragstart=function(){
   evt.dataTransfer.setData('key6','s1');    
   console.log("omae wa");
}
*/
dropt.ondragover = function(evt) {
  evt.preventDefault();
  //console.log("over t");
}
dropc.ondragover = function(evt) {
  evt.preventDefault();
  //console.log("over c");
}
drops.ondragover = function(evt) {
  evt.preventDefault();
  //console.log("over s");
}

dropt.ondrop = function(evt) {
  evt.preventDefault();
  var icont = evt.dataTransfer.getData('key2');
  console.log("drop t");
  console.log(icont);
  var current = document.getElementById(icont);
  console.log(current);
  if(current != null) {
    if(this.hasChildNodes()) return;
    var newcurrent = document.createElement('img');
    newcurrent.src = current.src;
    this.appendChild(newcurrent);
    setBackground("green",this);
  }
  else {
    if(!this.hasChildNodes())
      setBackground("red",this);
  }
}
dropc.ondrop = function(evt) {
  evt.preventDefault();
  var iconc = evt.dataTransfer.getData('key1');
  console.log("drop c");
  console.log("dd",iconc);
  var current = document.getElementById(iconc);
  console.log(current);
  if(current != null) {
    if(this.hasChildNodes()) return;
    var newcurrent = document.createElement('img');
    newcurrent.src = current.src;
    this.appendChild(newcurrent);
    setBackground("green",this);
  }
  else {
    if(!this.hasChildNodes())
      setBackground("red",this);
  }
}

drops.ondrop = function(evt) {
  evt.preventDefault();
  var icons = evt.dataTransfer.getData('key3');
  console.log("drop s");
  console.log(icons);
  var current = document.getElementById(icons);
  console.log(current);
  if(current != null) {
    if(this.hasChildNodes()) return;
    var newcurrent = document.createElement('img');
    newcurrent.src = current.src;
    this.appendChild(newcurrent);
    setBackground("green",this);
  }
  else {
    if(!this.hasChildNodes())
      setBackground("red",this);
  }
}

function setBackground (className,node) {
  node.classList.remove("green");
  node.classList.remove("red");
  node.classList.add(className);
}

#body {
  width: 100%;
  height: 100%;
}

.container {
  display: flex;
}

.column {
  flex: 1;
  background: #ffffff;
  border: 1px solid #ffffff;
  box-sizing: border-box;
}

.column-one {
  order: 3;
}

.column-two {
  order: 1;
}

.column-three {
  order: 4;
}

.column-four {
  order: 2;
}

.column-five {
  order: 5;
}

.drop-zone1 {
  align-content: center;
  width: 150px;
  height: 150px;
  border: 2px;
  border-style: solid;
  border-color: #535f6b;
}

.drop-zone2 {
  align-content: center;
  width: 150px;
  height: 150px;
  border: 2px;
  border-style: solid;
  border-color: #535f6b;
}

.drop-zone3 {
  align-content: center;
  width: 150px;
  height: 150px;
  border: 2px;
  border-style: solid;
  border-color: #535f6b;
}

.icon1 {
  width: 50px;
  height: 50px;
  margin-left: 45px;
}

.icon2 {
  width: 50px;
  height: 50px;
  margin-left: 56px;
  align-content: center;
}

.icon3 {
  width: 50px;
  height: 50px;
  margin-left: 58px;
}

.question {
  text-align: center;
  color: #535f6b;
  font-family: sans-serif;
  font-style: italic;
}


.green {
  animation-name: backgroundGreen;
  animation-duration: 1.5s;
  animation-iteration-count: 3;
  background-color:#0f0;
}

.red {  
  animation-name: backgroundRed;
  animation-duration: 1s;
  animation-iteration-count: 3;
  background-color:#f00;
}

/* The animation code */
@keyframes backgroundGreen {
    0%   {background-color:#fff;}
    50%  {background-color:#00ffbb;}
    100% {background-color:#00ff00;}
}

@keyframes backgroundRed {
    0%   {background-color:#fff;}
    50%  {background-color:#ff0055;}
    100% {background-color:#ff0000;}
}

Drag and drop the elements to their corresponding set to achieve: 
a. 3 circles in the circle set
b. 2 triangles in the triangle set
c. 5 squares in the square set

How to add effect to drag and drop elements in java script

Answers (1)

Related Questions