Click here to Skip to main content
13,863,088 members
Click here to Skip to main content
Add your own
alternative version


12 bookmarked
Posted 25 Jun 2007
Licenced CPOL

Creating an AJAX enabled drag and drop custom control using Scriptaculous

, 25 Jun 2007
Rate this:
Please Sign up or sign in to vote.
A drag and drop custom control.


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).


Before you can begin to use these controls, you must have a working copy of the 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 ID="PagePart_2" runat="server">
            More draggable content here 

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.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Christopher Owen
Web Developer
United Kingdom United Kingdom
More about me at:

You may also be interested in...


Comments and Discussions

QuestionHow to make it work with repeater control? Pin
DYN List14-Jan-09 11:36
memberDYN List14-Jan-09 11:36 
GeneralMy vote of 1 Pin
gkgajjar24-Dec-08 12:25
membergkgajjar24-Dec-08 12:25 
QuestiononUpdate not triggering Pin
Lou Flees9-Jul-07 6:48
memberLou Flees9-Jul-07 6:48 
AnswerRe: onUpdate not triggering Pin
Christopher Owen9-Jul-07 8:06
memberChristopher Owen9-Jul-07 8:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web03 | 2.8.190214.1 | Last Updated 25 Jun 2007
Article Copyright 2007 by Christopher Owen
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid