如何将图像从 iframe 拖放到 div 中

Question

我创建了一个 iframe 来将图像上传并显示到服务器中，而无需刷新页面。请帮助我解决将保存的图像从 iframe 拖放到 div 中的解决方案。

在 iframe(iframeImage.aspx) 中使用以下代码显示来自服务器的图像：

<div>
<asp:DataList ID="dtlist" runat="server" RepeatColumns="4" CellPadding="5">
<ItemTemplate>    
<div id="divImage" runat="server" onclick="Test()" class="draggable">
<asp:Image Width="100" ID="Image1" ImageUrl='<%# Bind("Name", "~/MyImages/{0}") %>' runat="server" />
</div>
<br />
<asp:HyperLink ID="HyperLink1" Text='<%# Bind("Name") %>' NavigateUrl='<%# Bind("Name", "~/MyImages/{0}") %>' runat="server"/>
</ItemTemplate>
<ItemStyle BorderColor="Brown" BorderStyle="dotted" BorderWidth="3px" HorizontalAlign="Center"
VerticalAlign="Bottom" />
</asp:DataList>
</div>

从后面的代码中，我将图像绑定到数据列表中。

目前，我需要将图像拖放到主div中（CustomDesign.aspx的reportHeader）。下面的代码用于将文本绑定到主div：

function CreateTextLineLabel(textAreaElt) {
            var id = "Text1" + count.num++;
            $('#reportHeader').append('<div id="' + id + '" class="draggable" ondblclick="showPopup(this)"><span>' + $(textAreaElt).val() + '</span></div>&nbsp;&nbsp;');
            $("#" + id).draggable({ revert: "invalid" });
            $("#" + id).resizable();
            $("#reportHeader").droppable({
                activeClass: "ui-state-hover",
                hoverClass: "ui-state-active",
                drop: function(event, ui) {
                    $(this)
                    .addClass("ui-state-highlight")
                    .find("p")
                        .html("Dropped!");
                }
            });

            $(textAreaElt).remove();
        }

Answer 1

我很确定您实际上根本无法做到这一点，您 iframe 中的图像位于不同的文档中，因此没有拖放框架（我听说过）可以跨越 2 个文档。

在我看来，您最好实现 ajax 上传控件，而不是将上传代码放在 iframe 中。这仍然可以避免回发，但也可以绕过脏回发等。如果你有一个 ajax 上传的谷歌，你会看到很多不同的例子，你可以根据结果类型和你使用的实际代码库来使用。如果您不使用 MVC，那么 Ajax Control Toolkit 中有一个常见的方法

Answer 2

Following Example 将帮助您使用 Javascript 完成此任务。看看，我以前用过，效果很好。

祝你好运！