jquery将图像拖入文本并显示该图像的url

Question

我有一个文本框、一个 div 和一个图像。

我们有没有办法这样做：

1. 当我将该图像拖到 div 中时。 （图像不需要移动，就像我们左键单击它，然后将其拖动到任何地方，但它永远不会移动。）
2. div 显示图像。 （将 1 张图片复制到 div 中）
3. 文本显示该图像的 URL。

你对做这件事有什么想法或文章吗？

我从来没有编写过拖拽代码，但我知道Step 2 只是为 div 设置 HTML，Step 3 只是获取图像 src。但是，在Step 1上，我怎么知道“图像进入 div 并释放鼠标”？

我知道jQuery UI，它不是来自jQuery UI 的可拖动对象，因为可拖动对象使对象移动。 我不希望它移动。你可以尝试点击这个 stackoverflow 网站上的任何图片或任何链接。然后你按住鼠标并拖动它。尝试将链接拖到顶部的搜索框中，您将获得该链接。这就是我想要的。不是jQuery UI 的可拖动以使对象移动。

Answer 1

您可以使用 jQuery 中的可拖动功能来完成所有这些操作。我注意到您在评论中提到您不相信这会起作用，因为它实际上会移动图像，但不仅仅是默认选项！看看克隆助手属性。

这是一个与现有示例一样接近的示例，听起来您已经知道如何处理其余部分（获取 src 属性等）。

http://jqueryui.com/demos/droppable/#method-option

Answer 2

JQuery draggable 允许您在使用Helpers 进行拖动时将原件留在原处。查看此网址并尝试拖动顶部的灰色框。右边的两个使用 helpers，将原来的留在原处。

http://www.jqueryui.com/demos/draggable/#visual-feedback

将它与提供的link Artsemis 结合使用就可以了

将图片拖入地址栏是网络浏览器的功能，而不是 JS 或您正在查看的页面。你会想要使用 jquery draggable 或类似的东西。