Code Issues & Don't allow drop into a Div

I'm currently trying to replicate the game "Sortieren" by the german Tv show "Schlag den Raab". I want to have two Divisions. One, where all the terms are listed. And the other one where they are supposed to be dragged into the right order. The first problem I am encountering is being able to drop one term into another. Also, I tried fixing it by looking at: prevent drop inside a child element when drag & dropping with JS I fixed the problem thanks to the link and writing my script properly. (missed having a capital letter in the script) Problem 2: Also, I cant seem to drag them into the right order. Problem 3, apparently: I tried rewriting the code, and now I cant seem to make the Drag and Drop work - at least not into the "dropper"

I am not very experienced in coding so i scavenge from various sources. I am not quite sure whether it's the script or something in the html causing problems.

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

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

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

#sortieren {
  float: left;
  width: 20%;
  height: 1000px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

#higher {
  float: center;
  width: 88%;
  height: 15px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
  text-align: center;
}

#dropper {
  float: center;
  width: 88%;
  height: 500px;
  margin: 20px;
  border: 1px solid black;
}

#lower {
  float: center;
  width: 88%;
  height: 15px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
  text-align: center;
}

#Begriffe {
  float: right;
  width: 75%;
  height: 1000px;
  border: 1px solid black;
  margin: 10px;
  padding: 10px;
  justify-content: center;
}

.sort1 {
  background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
  border-radius: 16px;
  border-style: none;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  flex-shrink: 0;
  font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 500;
  height: 4rem;
  padding: 0 1.6rem;
  text-align: center;
  text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
  transition: all .5s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  margin: 50px
}

.sort1:hover {
  box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
  transition-duration: .1s;
}

@media (min-width: 768px) {
  .sort1 {
    padding: 0 2.6rem;
  }
}

<div id="sortieren">
  <div id="higher" draggable="false">Higher</div>
  <div id="dropper" ondrop="drop(event)" ondragover="allowdrop(event)">Dropper
    <div class="sort1" draggable="true" ondragstart="drag(event)" ondrop="return false" ondragover="return false" id="drag4">Moonlanding</div>
  </div>
  <div id="lower" draggable="false">Lower</div>
</div>

<div id="Begriffe" ondrop="drop(event)" ondragover="allowdrop(event)">
  <div class="sort1" draggable="true" ondragstart="drag(event)" ondrop="return false" ondragover="return false">Moonlanding</div>
  <div class="sort1" draggable="true" ondragstart="drag(event)" ondrop="return false" ondragover="return false">Moonlanding 23</div>
  <div class="sort1" draggable="true" ondragstart="drag(event)" ondrop="return false" ondragover="return false">Moonlanding 44</div>
</div>

Solution

As per my comments above.

allowDrop vs allowdrop. Make sure you use the same case
Your elements did not have ids. You are using the element's id in drag (setData).

Please learn to use your browser's development tools. Most of these issues are self-evident when using those tools.

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

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

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

#sortieren {
  float: left;
  width: 20%;
  height: 1000px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

#higher {
  float: center;
  width: 88%;
  height: 15px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
  text-align: center;
}

#dropper {
  float: center;
  width: 88%;
  height: 500px;
  margin: 20px;
  border: 1px solid black;
}

#lower {
  float: center;
  width: 88%;
  height: 15px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
  text-align: center;
}

#Begriffe {
  float: right;
  width: 75%;
  height: 1000px;
  border: 1px solid black;
  margin: 10px;
  padding: 10px;
  justify-content: center;
}

.sort1 {
  background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
  border-radius: 16px;
  border-style: none;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  flex-shrink: 0;
  font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 500;
  height: 4rem;
  padding: 0 1.6rem;
  text-align: center;
  text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
  transition: all .5s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  margin: 50px
}

.sort1:hover {
  box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
  transition-duration: .1s;
}

@media (min-width: 768px) {
  .sort1 {
    padding: 0 2.6rem;
  }
}

<div id="sortieren">
  <div id="higher" draggable="false">Higher</div>
  <div id="dropper" ondrop="drop(event)" ondragover="allowDrop(event)">
    <div class="sort1" draggable="true" ondragstart="drag(event)" ondrop="return false" ondragover="return false" id="drag4">Moonlanding</div>
  </div>
  <div id="lower" draggable="false">Lower</div>
</div>

<div id="Begriffe" ondrop="drop(event)" ondragover="allowDrop(event)">
  <div id="one" class="sort1" draggable="true" ondragstart="drag(event)" ondrop="return false" ondragover="return false">Moonlanding</div>
  <div id="two" class="sort1" draggable="true" ondragstart="drag(event)" ondrop="return false" ondragover="return false">Moonlanding 23</div>
  <div id="three" class="sort1" draggable="true" ondragstart="drag(event)" ondrop="return false" ondragover="return false">Moonlanding 44</div>
</div>