防止HTML5拖放功能多次放置同一元素

preventing HTML5 drag and drop function from multiple drops of the same element

本文关键字：元素 HTML5 拖放 功能 防止      更新时间：2023-09-26

我正在用HTML5制作一个拖放系统。将图像从屏幕左侧拖动到右侧（这些图像被标识为window1和window2 . 图像存储在数组中并附加到隐藏的输入元素中，因此我可以通过submit将它们发送到下一页。 问题是我只希望脚本检测window2中丢弃的内容，并且我不希望多个条目。

function drop(ev)
{
//append the hidden child
number.toString();
var hidden = document.createElement("input");
hidden.type = "hidden";
hidden.name = "option"+number;
hidden.value = my_images;
var f = document.getElementById("select");
f.appendChild(hidden);
number++;
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();    
}

我正在考虑一个简单的if statement但我应该寻找什么？ 如何检查当前放置图像的位置？

编辑：使用onmouseover事件以某种方式检查我当前悬停在哪个元素上是一个想法吗？ 如果是这样，我将如何完成此操作？ 当前我已经编写了这一小段代码

var current = document.mouseover;
current = document.getElementById(this);

HTML5 规范不考虑拖动多个项目。因此（您似乎已经在上面注意到了这一点），各种HTML5事件不会指示已拖动多个项目。

您在问题中没有明确说明这一点，但我的猜测是，您认为（或认为，这是一个较老的问题）由于浏览器自动生成的"幽灵"图像而拖动了多个项目。这些图像肯定会给人一种正在拖动多个元素的印象。

这些"幽灵"图像以及浏览器生成它们的方式存在许多已知问题。具体来说，重影图像是在拖动开始时生成的，这意味着定义适当拖动的代码甚至还没有运行。即浏览器不知道您是在拖动一个大的巨型元素，还是一个小元素，或者您在拖动之前不小心选择了很多文本......它生成它看到的任何东西的图像，这就是你得到的。

在某些浏览器（不是IE）中，您可以将拖动图像替换为更合适的图像。如果你不关心IE，这通常可以解决，但如果你关心IE，那么你就发现了为什么人们对HTML5 API感到恼火。

相关文章：