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

Question

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

我们有什么办法可以这样做：

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

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

我一生中从未编写过拖放代码，但我知道第 2 步只是为 div 设置 HTML，第 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

JQuerydraggable允许您在使用Helpers. 查看此网址并尝试拖动顶部的灰色框。右边的两个使用助手，把原来的留在原地。

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

将其与提供的链接 Artsemis结合使用就可以了

将图像拖到地址栏中是 Web 浏览器的功能，而不是 JS 或您正在查看的页面。您将需要使用 jquery draggable 或类似的东西。