Repeater Item With Drag And Drop Capabilities

There is no magic to this at all. This is the functionality which we will achieve with the help of jQuery-UI. With jQquery-UI, we can achieve lots of other features. You can visit the jQuery-UI website for more information.

jQuery-UI is a very lightweight tool to design good looking web applications. At least, if we are comfortable with or at least understand HTML, CSSS and JavaScript, jQuery easily, because jQuery-UI uses the same.

We use repeater to display the content. Sometimes we want the features of drag and drop for comparison purposes. Basically, Repeater is a very lightweight server side control to display the data-source or the list items.

For Repeater control, you may visit my article:

• Repeater Control In ASP.NET

My suggestion is if you have not worked with Repeater, first visit the link given above and learn about it.

Notes given on jQuery-ui.com for Drag and Drop

Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.
 
Now, we will start implementing the drag and drop feature to Repeater items.

Step by Step

Create an ASP.NET Website project named “RepeaterItemWithDragNDrop”.



After successful creation of the project in your Solution Explorer, it will look as shown below.



Right click on project title I.e. “RepeaterItemWithDragNDrop” .



Select WebForm, as shown in the image given below.



Now, click on ToolBox and select Repeater control, which is under the DATA option.



Drag and drop Repeater control on Default.aspx page.



Your default.aspx will be displayed in design view, as shown above.

Right click on the project title I.e. “RepeaterItemWithDragNDrop” in bold letters.



Select LINQ TO SQL Class and name it as “FriendListDataClass.dbml”.



As you click ADD button in the screen, shown above, you will see the dialog box.



Simply click Yes.

Now, switch to the Server Explorer and select Data Connections.

Table Structure

SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

SET ANSI_PADDING ON
GO

CREATE TABLE [dbo].[tblTechFriends](
[FriendID] [int] IDENTITY(1,1) NOT NULL,
[Name] [varchar](50) NULL,
[EmailAddress] [varchar](150) NULL,
[TotalArticles] [int] NULL
) ON [PRIMARY]

GO

SET ANSI_PADDING OFF
GO

Sample Datas



Right click on Data Connections and select ADD CONNECTION option.



After successful connection establishment with the Database Server, your Server Explorer will look, as shown below.



Double click your DBML file, which is located inside the APP_CODE folder.

Drag and drop the table named “ tblTechFriends” on DBML canvas.



Now, double click on “Default.aspx” page.

Insert the Repeater code in default.aspx page.

<asp:Repeater ID="rptTechFriends" runat="server">
    <ItemTemplate>
        <div id="draggable" class="draggable ui-widget-content">
            <asp:Label ID="lblFriendName" runat="server" Text='<%# Eval("Name")%>'></asp:Label>
            <br /> Email Address : <b><asp:Label ID="lblEmailAddress" runat="server" Text='<%# Eval("EmailAddress")%>'></asp:Label></b>
            <br /> Total Articles : <b><asp:Label ID="lblTotalArticles" runat="server" Text='<%# Eval("TotalArticles")%>'></asp:Label></b>
        </div>
    </ItemTemplate>
</asp:Repeater>

In the repeater given above, we are showing FRIEND’S Name, EmailAddress and Total Articles.
 
What are the important lines of code?

1. For stylesheet of jQuery-UI.css, we used CDN
   

   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

2. For jQuery reference, we used CDN.
   

   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

3. For jQuery-ui.js reference, we used CDN.
   

   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

4. We created a style called: 
   

   .draggable { width: 225px; height: 100px; padding: 0.5em; }

   This is assigned to all divs of Repeater. 
   
   
5. jQuery function
   

   <script>
       $(function() {
           $(".draggable").draggable();
       });
   </script>

In the code given above, we are assigning the drop and drag functionalities to all DIVs, which have a class called “draggable”.

Full code of Default.aspx page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head id="Head1" runat="server">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <style>
            .draggable {
                width: 225px;
                height: 100px;
                padding: 0.5em;
            }
        </style>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $(function() {
                $(".draggable").draggable();
            });
        </script>
        <title>Drag N Drop</title>
    </head>

    <body>
        <form id="form1" runat="server">
            <div>
                <asp:Repeater ID="rptTechFriends" runat="server">
                    <ItemTemplate>
                        <div id="friendDetail" class="draggable ui-widget-content">
                            <asp:Label ID="lblFriendName" runat="server" Text='<%# Eval("Name")%>'></asp:Label>
                            <br /> Email Address : <b><asp:Label ID="lblEmailAddress" runat="server" Text='<%# Eval("EmailAddress")%>'></asp:Label></b>
                            <br /> Total Articles : <b><asp:Label ID="lblTotalArticles" runat="server" Text='<%# Eval("TotalArticles")%>'></asp:Label></b>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
            </div>
        </form>
    </body>

    </html>

Full code of Default.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default: System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack) {
            var db = new FriendListDataClassDataContext();
            rptTechFriends.DataSource = db.tblTechFriends.ToList();
            rptTechFriends.DataBind();
        }
    }
}

Output

By default, the page will render as shown below.


By default, the page will load as shown above.
 
Later on, move the box (div) anywhere with the Browser screen.

I arranged the box per total articles.

Example 1


Example 2



You can move the DIV anywhere.