Click here to Skip to main content
Click here to Skip to main content

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.

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.

License

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

Share

About the Author

Christopher Owen
Web Developer
United Kingdom United Kingdom
More about me at: www.clearlime.com

Comments and Discussions

 
QuestionHow to make it work with asp.net repeater control? PinmemberDYN List14-Jan-09 10:36 
GeneralMy vote of 1 Pinmembergkgajjar24-Dec-08 11:25 
required more info.
QuestiononUpdate not triggering PinmemberLou Flees9-Jul-07 5:48 
AnswerRe: onUpdate not triggering PinmemberChristopher Owen9-Jul-07 7:06 

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.140821.2 | Last Updated 25 Jun 2007
Article Copyright 2007 by Christopher Owen
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid