Ubuntu Question posted in
The official Ubuntu documentation can be found here.

Ubuntu – 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>
Tags:

2

Answers


  1. 0

    There are many problems with the code.

    Firstly, you defined the function allowDrop but then you reference the function allowdrop (lowercase) which is not defined, so it is not executing that function at all.

    Secondly, your drag-and-drop functions do not do anything. To drag and drop you need to move the element to the mouse’s position.

    To fix this code would require many changes.

    Consider reading about how to drag-and-drop in HTML here:

    How to Drag and Drop in HTML

    Login or Signup to reply.
  2. 0

    As per my comments above.

    1. allowDrop vs allowdrop. Make sure you use the same case
    2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search