2011-03-11 7 views
0

ImageViewer와 같은 이미지를 보여주는 listview가 있으며 ListView 내에서 드래그 드롭 동작을 구현하려고합니다. 아래 목록의 사용자 정의 ListView에서 Srag-Drop을 어떻게 달성 할 수 있는지 알려주십시오. 뒤에ASP.Net의 ListView 내 항목 놓기

<asp:ListView ID="lvPhotoViewer" runat="server" GroupItemCount="3" InsertItemPosition="LastItem"> 
    <LayoutTemplate> 
     <table id="groupPlaceholderContainer" runat="server" border="1"> 
      <tr id="groupPlaceholder" runat="server"> 
      </tr> 
     </table> 
    </LayoutTemplate> 
    <ItemTemplate> 
     <td id="Td4" align="center" style="background-color: #eeeeee;"> 
      <asp:Image runat="server" ID="imPhoto" Height="100px" Width="100px" ImageUrl='<%# "~"+Eval("PhotoUrl") %>' /> 
      <br /> 
      <asp:Label ID="DefaultPhotIDLabel" runat="server" Text='<%# Eval("PhotoName") %>' /> 
     </td> 
    </ItemTemplate> 
    <GroupTemplate> 
     <tr id="itemPlaceholderContainer" runat="server"> 
      <td id="itemPlaceholder" runat="server"> 
      </td> 
     </tr> 
    </GroupTemplate> 
    <InsertItemTemplate> 
     <td id="Td3" width="150px" height="150px" runat="server" align="center" style="background-color: #e8e8e8; 
      color: #333333;"> 
      <asp:FileUpload ID="fileUpload" runat="server" /> 
     </td> 
    </InsertItemTemplate> 
</asp:ListView>              

코드 :

public class ImageEntity 
{ 
    public string PhotoName { get; set; } 
    public int PhotoIndex { get; set; } 
    public string PhotoURL { get; set; } 
} 


public partial class _Default : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 
     IList<ImageEntity> imagesList = new List<ImageEntity>() 
     { 
      new ImageEntity(){ PhotoName="House1", PhotoIndex=1, PhotoURL= @"\Images\House-01.JPG" }, 
      new ImageEntity(){ PhotoName="House2", PhotoIndex=2, PhotoURL= @"\Images\House-05.JPG" }, 
      new ImageEntity(){ PhotoName="House3", PhotoIndex=3, PhotoURL= @"\Images\house.jpg" }, 
      new ImageEntity(){ PhotoName="House4", PhotoIndex=4, PhotoURL= @"\Images\house2.jpg" } 
     }; 

     lvPhotoViewer.DataSource = imagesList; 
     lvPhotoViewer.DataBind(); 
    } 
} 

+0

드래그 앤 드롭하려는 것은 무엇입니까? 어디에? 이미지를 정렬 하시겠습니까, 아니면 ..? –

+0

ItemTemplate을 사용하여 이미지를 표시하는 목록 뷰 컨트롤이 있습니다. 이제 Draog-drop을 사용하여 listview 내부의 이미지를 재구성 할 수 있습니다. 끌어서 놓기를 사용하여 이미지의 순서를 바꾸고 싶습니다. –

답변

2

가 JQuery와 드래그를 사용하는 것을 고려 ListView에 내 이미지에 대한 드래그 앤 드롭을 구현하기 위해 나에게있는 방법을 제안하십시오/드롭 UI 기능 : http://jqueryui.com/demos/draggable/http://jqueryui.com/demos/droppable/ . 당신이/드롭 행을 드래그 할 경우에도

,이 체크 아웃 : jQuery draggable table elements

HTH를.

+0

감사합니다 뇌 .. 솔루션은 완벽 해 보이지만 작은 데모 응용 프로그램이 정말 도움이 될 것입니다. 나는 JQuery에 익숙하지 않기 때문에, 가능한 경우 Listview 내부의 이미지를 드래그 - 드롭 할 수있는 샘플 애플리케이션을 가르쳐 주시겠습니까? –

+0

브레인, 당신이 제공 한 링크가 실제로 도움이되었습니다. Drag-dRop 기능을 구현할 수 있습니다. –