1

So here goes, I've been working on this for a bit now and am perplexed. I have two containers that are div's. Each container has the ability to drag and drop from or to the other container an element. The bottom most container has three drag and drop elements from the get go. These three elements are .jpg images. They formerly were .bmp images but I thought that may have been causing an issue so tried a different image type, the .jpg type. I am able to drag the three images back and fourth fine and in varying assortments. The problem is that when I drag and drop an image on top of another image that is also drag and drop capable the image being dragged and dropped disappears. I've moved the image that seems to be hiding the other image up or down to see if it was just superimposed on top. That isn't the case. It's as if the image disappears. I've used Firefoxe's "Inspect element" option to view the html/java code and see no errors when dragging or dropping. All seems to respond as it should. That being said, when I was in the console section of the debugging screen I enabled all checks and did see something interesting. When I dragged and dropped an image on top of another image it would log a "reflow: 0.4s". I did some further researching and as I understand it a reflow is the browsers' way of calculating a change in layout. That obviously tells me that there is a change occurring but I can't tell what code is running to hide or cause the dragged and dropped image to disappear. I also noticed that the image disappearing only disappears if the mouse is hovering over the image to be dropped on. If the mouse is off the image yet the image being dragged still hovers partially over the bottom image it wont disappear. Rather, once dropped the image being dropped properly nests between or to the side of the respective images. Please see the bellow code to get a better idea. Any advice would be great!!

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));
}
#divDrop {
  width: 50%;
  height: 380px;
  border: 1px solid #00e8ff;
  float: left;
  clear: right;
}
#divStart {
  width: 50%;
  height: 380px;
  float: left;
  clear: left;
  color: #FF0000;
}
.imgStyling {
  width: 125px;
  height: 80px;
  padding-left: 10px;
  padding-right: 10px;
}
<!doctype html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
//div that is can take drag n drop images
  <div id="divDrop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

//div that contains drag n drop images
  <div id="divStart" ondrop="drop(event)" ondragover="allowDrop(event)">
    <br>
    <p>Drag the desired images bellow to the blue box please!</p>
    <img id="drag1" class="imgStyling" src="1.jpg" draggable="true" ondragstart="drag(event)" />
    <img id="drag2" class="imgStyling" src="2.jpg" draggable="true" ondragstart="drag(event)" />
    <img id="drag3" class="imgStyling" src="2.jpg" draggable="true" ondragstart="drag(event)" />
    </html>

This post kinda has the same thing going on but his only occurs when dragging the image outside of the container to the next. That's not what's going on here. As stated before everything really functions as it should. It's only when the images are dropped on top of another image that anything goes astray. link: Draggable element hidden outside container

Community
  • 1
  • 1
Rave Yoda
  • 13
  • 3

1 Answers1

1

This updated drop function will correct your problems:

function drop(ev) {
  var data = ev.dataTransfer.getData("text");
  this.appendChild(document.getElementById(data));
}
document.getElementById("divDrop").addEventListener("drop", drop, false);

The event listener is added through the more standard addEventListener instead of an inline event handler. I recommend this for all events.

The function uses this instead of event.target. The this keyword refers to the element on which the event was set. The drop div. However this will not work on IE older than version 9.

Mouser
  • 13,132
  • 3
  • 28
  • 54
  • Thank you for the quick reply! I've applied your changes and while it does fix the disappearing aspect of the problem it goes and breaks everything else.... So, now when images are dragged between the two containers all it does is open the image in the same window allowing for viewing and expanding. So it wont drop between the two divs.... I'm not very strong in java though and I may have applied your code incorrectly. In debugging mode in Firefox I get errors thrown saying that TypeError: this.appendChild is not a function. – Rave Yoda Feb 07 '15 at 22:29
  • Could you provide me the way you've implemented this? – Mouser Feb 08 '15 at 08:47
  • function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { var data = ev.dataTransfer.getData("text"); this.appendChild(document.getElementById(data)); } document.getElementById("divDrop").addEventListener("drop", drop, false); – Rave Yoda Feb 08 '15 at 21:26
  • ---And--- – Rave Yoda Feb 08 '15 at 21:31
  • This answer helped me solve a similar problem. I was using javascript's ondrag, ondragover and ondragstart. When I dropped draggable elements on top of other draggable elements the element just disappeared. The solution was to replace the inline event listeners as mentioned in the above answer. Thanks. – lhavCoder May 10 '17 at 17:04