iframe에서 div로 이미지를 드래그 앤 드롭하는 방법

이미지를 업로드하고 페이지를 새로 고치지 않고 서버에 표시 할 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>

, 나는 DataList에로 이미지를 결합하고있다. 당신

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

출처

2011-12-26 psobhan

자세한 정보가 필요합니다. 모든 페이지가 동일한 도메인에서 실행되고 있습니까? –

참조 http://stackoverflow.com/questions/1382553/dragging-objects-out-of-an-iframe –

임 확신 :

는 현재, 내가 드래그 앤 주요 사업부로 이미지를 드롭 할 필요가 (CustomDesign.aspx의 reportHeader) 국지적 인 코드 아래 주요 사업부로 텍스트를 결합하는 데 사용됩니다 캔트는 실제로이 모든 작업을 수행합니다. iframe의 이미지는 다른 문서에 있으므로 드래그 앤 드롭 프레임 워크 (아무도 들어 본 적이없는)는 2 개의 문서에 걸쳐 작동합니다.

iframe에 업로드 코드가있는 대신 ajax 업로드 컨트롤을 구현하는 것이 나을 것 같습니다. 이것은 여전히 포스트 백이있는 것을 피할뿐만 아니라 더러운 포스트 백 (postbacks)을 가져옵니다. ajax 업로드를위한 구글을 가지고 있다면 당신은 사용하고있는 결과와 실제 코드베이스의 종류에 따라 사용할 수있는 많은 다른 예제들을 볼 수있을 것이다. MVC를 사용하고 있지 않다면 Ajax Control Toolkit에 일반적인 것이 있습니다.

출처

2011-12-26 10:08:12

저는 Ajax 컨트롤을 사용해 보았습니다.하지만 저는 아약스를 처음 접했을 때 적절한 해결책을 찾을 수 없었습니다. . 내 문제는 내가 전체 페이지를 새로 고치지 않고 이미지를 서버에 업로드하고 마찬가지로 저장된 이미지를 표시해야한다는 것입니다. 아약스 컨트롤을 사용하여 이미지 URL을 서버에 저장하지 못했습니다. 제가 완전히 혼란스러워서 적절한 경로를 안내해주십시오. – psobhan

이 기사에서 http://www.mikeborozdin.com/post/AJAX-File-Upload-in-ASPNET-with-the-AsyncFileUpload-Control.aspx에서 Ajax Control Toolkit 비동기 업로드를 사용하는 방법과 업로드 된 이미지를 페이지에 표시하십시오. –

Following Example은 Javascript로이 작업을 수행하는 데 도움이됩니다. 그것을 밖으로 검사하십시오, 나는 그것을 전에 사용하고 완벽하게 작동합니다.

굿윌!

출처

2011-12-26 15:29:01

iframe에서 div로 이미지를 드래그 앤 드롭하는 방법

답변

관련 문제