Как перетащить изображение из 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 (reportHeader из CustomDesign.aspx). Нижеприведенный код используется для привязки текстов к основному 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

Следующий пример поможет вам сделать это с помощью Javascript. Проверьте это, я использовал это раньше, и он отлично работает.

Удачи!

Answer 2

Я почти уверен, что вы вообще не можете этого сделать, изображения в вашем iframe находятся в другом документе, поэтому никакие рамки перетаскивания (о которых я когда-либо слышал) не будут работать на 2 документах.Мне кажется, что вам лучше реализовать элемент управления загрузкой ajax, а не загружать код загрузки в iframe.Это по-прежнему позволит избежать обратной передачи, но также поможет избежать грязной обратной передачи.Если у вас есть Google для загрузки AJAX, вы увидите множество различных примеров, которые вы можете использовать в зависимости от типа результата и фактической базы кода, которую вы используете.Если вы не используете MVC, обычным является Ajax Control Toolkit