CODEWITHSUNDEEP
asp.netlistviewdrag-and-drop
CHash11
CHash11

Reputation: 855

Drag Drop items within ListView in ASP.Net

I have a listview showing images like ImageViewer and I want to implement Drag-Drop behavior within ListView. Please let me know how can i achieve the Srag-Drop inside the below kind of customized 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>

Code Behind:

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

Please suggest me a way to implement the drag-drop for images within the ListView

Upvotes: 0

Views: 4852

Answers (1)

Brian Mains
Brian Mains

Reputation: 50728

Consider using the JQuery drag/drop UI feature: http://jqueryui.com/demos/draggable/ and http://jqueryui.com/demos/droppable/.

Also, if you want to drag/drop rows, check this out: jQuery draggable table elements

HTH.

Upvotes: 2

Related Questions