使 DIV 接受并通过 JavaScript 处理 drop 可能吗？答案

【问题标题】：Make DIV accept and handle drop via JavaScript possible?使 DIV 接受并通过 JavaScript 处理 drop 可能吗？
【发布时间】：2009-04-29 18:31:18
【问题描述】：

我已经在谷歌上搜索并尝试了一段时间，但没有成功。所以这里是：

我想要做的是将文本放在 DIV 标记上并使用 JavaScript 处理它。大致如下：

<script type="text/javascript">

function handleDrop(sender, args)
{
  $('#theDiv').html(args.textfromdrop);
}

</script>

<div id="theDiv" ondrop="handleDrop()" />

<br/>
<p>
This is some simple text. Draggable?
</p>

所以，在这个页面上，我希望能够将段落中的内容例如拖到 div 中，它会处理拖放并相应地更改它的外观（或者可能只是显示该文本，只要它能够处理它！）。我一直在尝试使用 jQuery，但它似乎是一个完全不同的模型，我无法将所有潜在的可拖动对象设置为这样，因为它们应该能够来自任何地方。这甚至可能吗？

编辑：如果我错了，请纠正我，但是这些 droppables 都需要一个可拖动的对象，对吗？我想要的是您可以从您无法控制的页面中删除纯文本。这听起来可能很奇怪，但它适用于 Firefox 扩展，您可以在其中将内容从一个页面拖到位于侧栏中的另一个页面。

【问题讨论】：

标签： javascript drag-and-drop

【解决方案1】：

我建议使用成熟的 Javascript 库，例如 jQuery 或 YUI。

【讨论】：

【解决方案2】：

您是否考虑过创建一个隐藏的文本区域（即使用 css 样式 visibility:hidden）与相关 div 重叠？然后使用 onchange JavaScript 事件检查 drop，或者如果这不起作用，则定期检查 textarea 的非空字符串值。我猜你的里程会因浏览器和操作系统而异。

【讨论】：

这是个好主意。我回家时会试试的。奢侈是我只需要它在 Firefox 中工作。但所有操作系统。

【解决方案3】：

或者如果你像我一样喜欢原型：http://wiki.github.com/madrobby/scriptaculous/droppables

编辑：根据您修改后的问题：不，没有办法允许用户将文本从一页拖放到另一页。除非你决定像你说的那样构建一个 FireFox 扩展。即使您可以找到解决安全问题的方法，即您无法为不在同一域下的页面编写脚本，您也只能在它们所在的窗口/iFrame 中拖放 DOM 元素。

【讨论】：

【解决方案4】：

我以前做过这个，不用任何库就可以完成。

我已经构建了以下方法：

跟踪鼠标移动的方法。
下降时读取和传递内容的方法。
对拖放方法使用了 onmousemove 和 onclick 事件。
OnMouseOver 用于您要放置文本的 div 区域 - 检测指针是否位于容器 (div) 上方。
最后，在删除文本后，我使用 innerHTML 删除了原始内容（如果需要），因此看起来它已被移动。

您几乎可以使用此功能实现类似 Windows 的拖放功能。我用它来拖放图像、图标等。

如果您在编码方面需要帮助，我可以为您提供一些指导，但如果您稍微 Google 一下，您会发现大部分内容，那么您需要做的就是让它们一起工作。

【讨论】：