Creating an AJAX enabled drag and drop custom control using Scriptaculous

• Download source code - 21.8 KB

Introduction

Okay, I'm not much of an article writer, but I hope you find this useful.

With all the AJAX hype around these days, there is nothing with more of a wow factor than adding drag and drop functionality to your development. The Scriptaculous framework allows for such functionality, and having this wrapped around a simple to use ASP.NET user control would be more than handy (for me at least).

Background

Before you can begin to use these controls, you must have a working copy of the script.aculo.us 1.7.1 beta 3 library available here.

Using the Code

To use the controls, simply download the project and build the solution. The resulting .dlls should be the control's library and an accompanying Ajax.NET library written by Jason Diamond.

When you have compiled the solution, include the .dlls in your website solution and register the controls in your web pages; e.g.:

<%@ Register Assembly="CJO.Core.Controls" 
             Namespace="CJO.Core.Controls" TagPrefix="CJO_Control" %>

The first control you are going to have to add is the "PagePartManager" which will spit out all the required JavaScript to your page. Note: there is a 'Scriptaculous_Path' property that you should set to indicate the root path to your Scriptaculous directory.

<CJO_Control:PagePartManager Scriptaculous_Path="scriptaculous" 
             ID="PagePartManager1" runat="server" />

After which you can add the "PagePartHolder" controls which are the sections of the page where you can drop items, and the "PagePart" which is a control which can be dragged.

<CJO_Control:PagePartPlaceHolder ID="PagePartPlaceHolder1" runat="server">
    <CJO_Control:PagePart ID="PagePart_1" runat="server">
            Draggable content here 
    </CJO_Control:PagePart>
    <CJO_Control:PagePart ID="PagePart_2" runat="server">
            More draggable content here 
    </CJO_Control:PagePart>
</CJO_Control:PagePartPlaceHolder>

Whenever a "PagePart" control is moved to another position, there is an AJAX call made that triggers a custom event in the "PagePartManager". This event will be called once per "PagePartPlaceHolder" added to the page; e.g.:

protected void Page_Init(object sender, EventArgs e)
{
    prtManager1.SortableOrder_Changed += 
      new PagePartManager.SortOrder_Changed_Deligate(prtManager1_SortableOrder_Changed);
}

void prtManager1_SortableOrder_Changed(SortOrderChangedEventArgs e)
{
    throw new Exception("Sortable order changed: " + e.RawResponse);
}

Hope this is useful to you guys.