Drag and Drop

by vzufelt

HTML

<html>
<head>
<style>
.droptarget {
  width: 100px; 
  height: auto;
  margin: 0px;
  padding: 10px 0;
  border: 1px solid #aaaaaa;
  background-color: white;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}

.droptarget2 {
  width: 100px; 
  height: auto;
  margin: 0px;
  padding: 10px 0;
  border: 1px solid #aaaaaa;
  background-color: white;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}

.droptarget3 {
  width: 100px; 
  height: 10px;
  margin: 0px;
}

<br>
</style>
</head>
<body>

<p>Move the races to the correct faction</p>
<div class="droptarget2">
  <p id="Horde">Horde </p>
</div>

<div class="droptarget2">
  <p id="Alliance">Alliance </p>
</div>
<br>
<div class="droptarget">
  <p draggable="true" id="dragtarget1"> </p>
</div>

<div class="droptarget">
  <p draggable="true" id="dragtarget2"> </p>
</div>

<div class="droptarget3">
  <p draggable="true" id="Orc">Orc</p>
</div>
<div class="droptarget3">
  <p draggable="true" id="Human">Human</p>
</div>
<div class="droptarget3">
  <p draggable="true" id="Dwarf">Dwarf</p>
</div>
<div class="droptarget3">
  <p draggable="true" id="Undead">Undead</p>
</div>
<div class="droptarget3">
  <p draggable="true" id="Tauren">Tauren</p>
</div>
<div class="droptarget3">
  <p draggable="true" id="NightElf">Night Elf</p>
</div>
<div class="droptarget3">
  <p draggable="true" id="Gnome">Gnome</p>
</div>
<div class="droptarget3">
  <p draggable="true" id="Draenei">Draenei</p>
</div>
<div class="droptarget3">
  <p draggable="true" id="Troll">Troll</p>
</div>
<div class="droptarget3">
  <p draggable="true" id="BloodElf">Blood Elf</p>
</div>
<div class="droptarget3">
  <p draggable="true" id="Worgen">Worgen</p>
</div>
<div class="droptarget3">
  <p draggable="true" id="Goblin">Goblin</p>
</div>

<br><br><p id="demo"></p>

<script>

document.addEventListener("dragstart", function(event) {
 
  event.dataTransfer.setData("Text", event.target.id);

  event.target.style.opacity =...

JavaScript

document.addEventListener("dragstart", function(event) {
 
  event.dataTransfer.setData("Text", event.target.id);

  event.target.style.opacity = "0.4";
});

document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});

document.addEventListener("dragend", function(event) {
  event.target.style.opacity = "1";
});

document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "1px dotted red";
  }
});

document.addEventListener("dragover", function(event) {
  event.preventDefault();
});

document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});

document.addEventListener("drop", function(event) {
  event.preventDefault();
  if ( event.target.className == "droptarget" ) {
    document.getElementById("demo").style.color = "";
    event.target.style.border = "";
    var data = event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
  }
});