Question

所以在这里，我现在一直在研究这个问题并且感到困惑。我有两个div的容器。每个容器都能够从一个元素拖放到另一个容器。最底层的容器有三个拖放元素。这三个元素是.jpg图像。他们以前是.bmp图像，但我认为这可能导致一个问题，所以尝试了不同的图像类型，.jpg类型。我可以将三张图像拖回来，第四张也可以在不同的分类中拖动。问题在于，当我将图像拖放到另一个同时具有拖放功能的图像之上时，拖放的图像会消失。我已经移动了图像，似乎是向上或向下隐藏其他图像，看它是否只是叠加在顶部。情况并非如此。好像图像消失了。我使用了Firefoxe的“Inspect element”选项来查看html / java代码，并在拖放时看不到任何错误。所有人似乎都应该做出回应。话虽这么说，当我在调试屏幕的控制台部分时，我启用了所有检查并确实看到了一些有趣的东西。当我将图像拖放到另一个图像上时，它会记录“回流：0.4秒”。我做了一些进一步的研究，据我所知，回流是浏览器计算布局变化的方式。这显然告诉我发生了变化，但我无法分辨出正在运行的代码是为了隐藏还是导致拖放的图像消失。我还注意到，如果鼠标悬停在要放下的图像上，图像消失只会消失。如果鼠标离开图像但拖动的图像仍然部分地悬停在底部图像上，它将不会消失。相反，一旦丢弃，正确丢弃的图像就会嵌套在相应图像的侧面或侧面。请参阅下面的代码以获得更好的主意。任何建议都会很棒!!

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>

这篇帖子有点同样的事情，但只有在将容器外的图像拖到下一个时才会发生。这不是这里发生的事情。如前所述，一切都真正起作用。只有当图像被丢弃在另一个图像之上时，任何东西才会误入歧途。链接：Draggable element hidden outside container

Answer 1

此更新的删除功能将纠正您的问题：

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

通过更标准的addEventListener而不是内联事件处理程序添加事件侦听器。我推荐这适用于所有活动。

该函数使用此代替event.target。 this关键字指的是设置事件的元素。 drop div。{{1}}。但是，这不适用于早于版本9的IE。

可拖动元素在悬停在另一个可拖动元素的顶部时消失

1 个答案: