2011-12-26 14 views
0

イメージをアップロードしてサーバーに表示するiframeを作成しました。ページを更新せずに表示しました。保存されたイメージをiframeからドラッグアンドドロップする方法を教えてくださいdivに入れるイメージを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にテキストを結合するために使用されるメインのdiv(CustomDesign.aspxのreportHeader)に画像をドラッグ&ドロップする必要があります。

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(); 
     } 
+0

詳細情報が必要です。すべてのページが同じドメインで動作していますか? –

+2

を参照してください。http://stackoverflow.com/questions/1382553/dragging-objects-out-of-an-iframe –

答えて

1

イムますかなり確信して実際にこれを行うことはできません。あなたのiframe内の画像は別の文書にありますので、ドラッグ&ドロップのフレームワーク(これまで聞いたことがない)は2つの文書にまたがって動作しません。

アップロードコードをiframeに入れるのではなく、ajaxのアップロードコントロールを実装するほうがいいと思います。これはやはりポストバックを避けるだけでなく、汚れたポストバックを回避します。あなたはajaxのアップロードのためのGoogleを持っている場合は、使用している結果の種類と実際のコードベースの種類に応じて使用できるさまざまな例がたくさん表示されます。 MVCを使用していない場合は、一般的なものがAjax Control Toolkitにあります。

+0

私はAjaxコントロールを使用しようとしましたが、私はAjaxを初めて使ったので適切な解決策を思い付くことができませんでした。私の問題は、私はページ全体をリフレッシュせずに保存されたイメージを表示することなく、サーバーにイメージをアップロードする必要があるということです。 ajaxコントロールを使用して、私はサーバーに保存する画像のURLを取得することができませんでした。私が完全に混乱したため、適切な道を案内してください。 – psobhan

+0

この記事を見て、http://www.mikeborozdin.com/post/AJAX-File-Upload-in-ASPNET-with-the-AsyncFileUpload-Control.aspxには、Ajax Control Toolkitの非同期アップロードとアップロードした画像をページに表示する –

1

Following ExampleはJavascriptでこれを達成するのに役立ちます。それをチェックして、私はそれを前に使用して、それは完全に動作します。

Goodl luck!

関連する問題