0

function dragStart(event) {
  event.dataTransfer.setData("Text", event.target.id);
}

function dragging(event) {
  if (event.dataTransfer.getData("text") == "drag1") {
    document.getElementById("demo").innerHTML = "drag1 moving";
    document.getElementById("rectangle2").ondrop = "return false();";
    document.getElementById("rectangle2").disabled = true;
  }
  if (event.dataTransfer.getData("text") == "drag2") document.getElementById("demo").innerHTML = "drag2 moving";
}

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

function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("Text");
  event.target.appendChild(document.getElementById(data));
  document.getElementById("demo").innerHTML = "The p element was dropped";
  if (event.dataTransfer.getData("text") == "drag1") document.getElementById("demo").innerHTML = "Drag1 moved";
  if (event.dataTransfer.getData("text") == "drag2") document.getElementById("demo").innerHTML = "Drag2 moved";
}
.rectangle1 {
  float: left;
  width: 100px;
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid red;
}

.rectangle2 {
  float: left;
  width: 100px;
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid blue;
}

.rectangle3 {
  float: left;
  width: 100px;
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid green;
}

.rectangle4 {
  float: left;
  width: 100px;
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid purple;
}
<p>Drag the p element back and forth between the rectangles:</p>

<table>
  <tr>
    <td>
      <div class="rectangle1" ondrop="drop(event)" ondragover="allowDrop(event)">
      </div>
    </td>
    <td>
      <div class="rectangle2" id="rectangle2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="rectangle3" ondrop="drop(event)" ondragover="allowDrop(event)">
      </div>
    </td>
    <td>
      <div class="rectangle4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </td>
  </tr>
</table>

<p class="drag1" name="drag1" id="drag1" ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true">Drag 1</p>

<p class="drag2" name="drag2" id="drag2" ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true">Drag 2</p>

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

I don't know why this is happening. I am testing a small interface to learn how to disable certain drop places. I need to be able to enable/disable drop places according to the object being moved. Object A can be dropped on place 1 and place 2 only, object B can be dropped on place 3 and place 4 only.

I copy the whole code at the bottom so anyone can see there is absolutely no mention of hugedomains-dot-com in it. And you never know, it might be useful for someone. The relevant function is this one:

function dragging(event) {
  if (event.dataTransfer.getData("text") == "drag1") {
    document.getElementById("demo").innerHTML = "drag1 moving";
    document.getElementById("rectangle2").ondrop = "return false();";
    document.getElementById("rectangle2").disabled = true;
    }
  if (event.dataTransfer.getData("text") == "drag2") document.getElementById("demo").innerHTML = "drag2 moving";
}

I'm just trying stuff, trying to find the proper syntax.

When I tested this code, I got redirected to hugedomains-dot-com. And worse, I was offered to buy the domain "drag1-dot-com", the name of my object!!! I first thought there was something wrong with the browser. I reintalled it with :

sudo apt remove --purge firefox
sudo apt install firefox

No change. I installed an add-on called "Block Site". Now I get redirected to a page saying hugedomains-dot-com is blocked.

I don't want to be redirected at all, I just want my "drag1" object to go back to it's original place if it's dropped over the wrong place (called "rectangle2").

Why on Earth is this happening? How can I stop it? Please help.

The rest of this post is the complete code of the html page, probably uninteresting for most readers.

<!DOCTYPE HTML>
<html>
<head>
<style>

.rectangle1 {
  float: left; 
  width: 100px; 
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid red;
}

.rectangle2 {
  float: left; 
  width: 100px; 
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid blue;
}

.rectangle3 {
  float: left; 
  width: 100px; 
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid green;
}

.rectangle4 {
  float: left; 
  width: 100px; 
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid purple;
}

</style>
</head>
<body>

<p>Drag the p element back and forth between the rectangles:</p>

<table>
<tr>
<td>
<div class="rectangle1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</td>
<td>
<div class="rectangle2" id="rectangle2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</td>
</tr>
<tr>
<td>
<div class="rectangle3" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</td>
<td>
<div class="rectangle4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</td>
</tr>
</table>

<p class = "drag1" name = "drag1" id = "drag1" ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true">Drag 1</p>

<p class = "drag2" name = "drag2" id = "drag2" ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true">Drag 2</p>

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

<script>

function dragStart(event) {
  event.dataTransfer.setData("Text", event.target.id);
}

function dragging(event) {
  if (event.dataTransfer.getData("text") == "drag1") {
    document.getElementById("demo").innerHTML = "drag1 moving";
    document.getElementById("rectangle2").ondrop = "return false();";
    document.getElementById("rectangle2").disabled = true;
    }
  if (event.dataTransfer.getData("text") == "drag2") document.getElementById("demo").innerHTML = "drag2 moving";
}

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

function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("Text");
  event.target.appendChild(document.getElementById(data));
  document.getElementById("demo").innerHTML = "The p element was dropped";
  if (event.dataTransfer.getData("text") == "drag1") document.getElementById("demo").innerHTML = "Drag1 moved";
  if (event.dataTransfer.getData("text") == "drag2") document.getElementById("demo").innerHTML = "Drag2 moved";
}
</script>

</body>
</html>
deepak
  • 1,390
  • 1
  • 8
  • 12
Alain Reve
  • 163
  • 1
  • 1
  • 11
  • try incognito/ private mode in browser. – deepak Nov 16 '20 at 13:24
  • Thank you. I haven't gone so far as creating a web site yet. I have this page on my hard disk and I open it with Firefox with "File/Open" option. I tried Konqueror (a file manager and browser combined). The good news is that it didn't get redirected. The bad news is that "drag1" was dropped in "rectangle2". – Alain Reve Nov 16 '20 at 13:34
  • I'm in permanent private browsing mode with Firefox. @Bravo, what do you mean by "that's some bad juju", please? What am I supposed to do? – Alain Reve Nov 16 '20 at 13:37
  • When going to drag1.com, I'm redirected directly to hugedomains.com. I think it's a manipulation issue when you've drag the object, the browser tried to go to the site drag1.com – Cid Nov 16 '20 at 13:45
  • I've been unable to reproduce this behavior – Cid Nov 16 '20 at 13:46
  • strike that ... just got it to happen :p – Bravo Nov 16 '20 at 13:49
  • @Bravo how did you reproduce it? – Cid Nov 16 '20 at 13:49
  • I don't know :( copied the code, dragged stuff around – Bravo Nov 16 '20 at 13:50
  • All I can do it trigger a Google search with drag1 as keyword – Cid Nov 16 '20 at 13:51
  • 1
    it's that second box - the blue one .... the `document.getElementById("rectangle2").ondrop = "return false();";` is causing it – Bravo Nov 16 '20 at 13:53
  • Thank you Cid. I tried "drag1" in the url field and got duckduckgo's page with search results about "drag". But if I type "drag1-dot-com", I get to the blocked hugedomains-dot-com page. There was some stuff about weird browser behaviour, I remember having to type "prevent default" in these kind of javascript functions. But it still doesn't explain why I get redirected to hugedomains-dot-com, I should see a 404 error. – Alain Reve Nov 16 '20 at 13:55
  • Does this answer your question? [How to stop redirecting after \`drop\` event?](https://stackoverflow.com/questions/8938319/how-to-stop-redirecting-after-drop-event) – Cid Nov 16 '20 at 13:57
  • I'm afraid it's too complicated for me. I added "event.preventDefault();" in "function dragging(event)", first line of the function. It doesn't change the behaviour. With the document.getElementById("rectangle2").ondrop = "return false();" commented out there is no redirection, but "drag1" can be dropped in "rectangle2". – Alain Reve Nov 16 '20 at 14:07
  • I've sorted out the firefox problem! "drag1-dot-com" simply belongs to "hugedomains-dot-com". So nothing was wrong with my firefox. Ooops. Sorry, I didn't think of typing "whois drag1-dot-com" before. – Alain Reve Nov 16 '20 at 14:21
  • Now if someone could please tell me how to write "if "drag1" is being moved stop "rectangle2" from being droppable...? – Alain Reve Nov 16 '20 at 14:27
  • rewrite the callback of `document.getElementById("rectangle2").ondrop` and add the preventDefault there – Cid Nov 16 '20 at 17:15

1 Answers1

0

The way to stop the drop was to use ondragover.


        if (event.dataTransfer.getData("text") == "drag1") {
        document.getElementById("rectangle2").ondragover = "return false;"
        document.getElementById("rectangle4").ondragover = "return false;"
        }

Like this there is no redirect. "drag1" can be dropped into "rectangle1 and "rectangle2" but not in the other rectangles. If the user tries, it slides back to it's original position.

The problem now is that it disables droping in these rectangles permanently. I have to find out how to re-enable dropping into them "drag2". But this is another question.

Alain Reve
  • 163
  • 1
  • 1
  • 11