dragEnDrop

In this example below you will see how to do a dragEnDrop with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by rouws, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rouws ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>dragEnDrop</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<p>Drag an apple image into a rectangle:</p>

<div id="groen"></div>
<div id="rood"></div>

<img id="groeneAppel" src="http://www.i2clipart.com/cliparts/b/8/d/1/clipart-photorealistic-green-apple-b8d1.png" alt="groene appel" width="55" draggable="true">

<img id="rodeAppel" src="http://www.clker.com/cliparts/5/f/8/U/A/d/red-glossy-apple-md.png" alt="rode appel" width="50" draggable="true">
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/rouws/dragendrop-ZLbvvY */

div {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
    margin: 10px;
}
#groen {
  background-color: lightgreen;
}
#rood {
  background-color: tomato;
}
#groeneAppel {
  position: relative;
  top: 8px;
}
.glow {
  box-shadow: 0 0 10px 5px hsla(60,100%,50%,.8);
}

/*Downloaded from https://www.codeseek.co/rouws/dragendrop-ZLbvvY */
var groenVlak = document.getElementById('groen');
var roodVlak = document.getElementById('rood');
var rodeAppel = document.getElementById('groeneAppel');
var groeneAppel = document.getElementById('rodeAppel');
var dragging;

function allowDrop(ev) {
  ev.preventDefault();
  if ((dragging == "groeneAppel") && (this.id == "groen")) {
    this.classList.add('glow');
  }
  if ((dragging == "rodeAppel") && (this.id == "rood")) {
    this.classList.add('glow');
  }
}

function drag(ev) {
  dragging = this.id;
}

function dragEnd(ev) {
  groenVlak.classList.remove('glow');
  roodVlak.classList.remove('glow');
  dragging = '';
}

function leave(ev) {
  this.classList.remove('glow');
}

function drop(ev) {
  ev.preventDefault();
  if ((dragging == 'rodeAppel') && (this.id == "rood")) {
    var newEl = document.createElement('img');
    newEl.setAttribute('src', 'http://www.clker.com/cliparts/5/f/8/U/A/d/red-glossy-apple-md.png');
    newEl.setAttribute('width', 50);
    ev.target.appendChild(newEl);
  } else if ((dragging == 'groeneAppel') && (this.id == "groen")) {
    var newEl = document.createElement('img');
    newEl.setAttribute('src', 'http://www.i2clipart.com/cliparts/b/8/d/1/clipart-photorealistic-green-apple-b8d1.png');
    newEl.setAttribute('width', 55);
    ev.target.appendChild(newEl);
  }
}

groenVlak.addEventListener('drop', drop);
groenVlak.addEventListener('dragover', allowDrop);
groenVlak.addEventListener('dragleave', leave);

roodVlak.addEventListener('drop', drop);
roodVlak.addEventListener('dragover', allowDrop);
roodVlak.addEventListener('dragleave', leave);

rodeAppel.addEventListener('dragstart', drag);
rodeAppel.addEventListener('dragend', dragEnd);

groeneAppel.addEventListener('dragstart', drag);
groeneAppel.addEventListener('dragend', dragEnd);

Comments