The Ajax Control Toolkit includes a DropPanel Control Extender that lets you drag and drop content thereby moving it around on your web page [ more HERE ]. 

jQuery, or more specifically jQueryUI has Drag-and-Drop built-in.

Yup – like a lot of stuff in this series that means it’s just REALLY easy to get the effect you want using jQuery

Since this series is about showing how to do with jQuery the sort of things you would have previously done with the Ajax Control Toolkit, I’m going to defer catching the “drop” events to a future entry.

Here is the effect we’re looking for.


Drag and Drop …..

After including jQuery and jQUeryUI  (script & CSS) here is the code for the page.

<%@ Page Title='Home Page' Language='C#' MasterPageFile='~/Site.master' 
         AutoEventWireup='true' CodeFile='Default.aspx.cs' 
                        Inherits='_Default' %>

<asp:Content ID='HeaderContent' runat='server' 
    <link href='Styles/jquery-ui-1.8.13.custom.css' rel='stylesheet' 
                                                type='text/css' />
<asp:Content ID='BodyContent' runat='server' 
    <h2>Draggable Panel !</h2>
    <br />
    <div class=demo>
        <div id=draggable class=ui-widget-content>
            <br />
            I'm an AJAX Draggable Container.
            <br /><br />
            You could catch drop events and build a configurable UI.


        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Mauris varius ullamcorper lacus, ac pharetra libero commodo eu. 
        Aenean auctor imperdiet libero, sit amet scelerisque lorem placerat
        quis. Phasellus pretium, lacus eget euismod cursus, nunc nibh semper
        urna, at blandit elit nisl non dui. Sed blandit dignissim tellus, 
        in egestas orci facilisis vel. Curabitur consequat ante vel mauris
        accumsan rutrum. Aliquam lorem est, ornare eget mollis sit amet, 
        vestibulum et diam. Phasellus cursus massa sodales metus 
        luctus sed blandit quam rhoncus. Proin nunc risus, scelerisque eu 
        sagittis in, gravida vitae lectus. Maecenas et ipsum ac mauris 
        condimentum accumsan ac et ligula. Phasellus mattis, tortor quis 
        rutrum mollis, ante eros dictum leo, ac venenatis augue nisl sit 
        amet mauris. Maecenas cursus, arcu nec egestas molestie, leo 
        lectus pellentesque sapien, eu sollicitudin urna dolor vitae 
        nisl. Proin lobortis, tortor quis congue lacinia, arcu elit 
        consequat erat, vestibulum aliquet lorem massa sed leo. Suspendisse 
        volutpat odio in mauris cursus aliquam. Nullam sed sapien sit amet mi 
        laoreet sagittis. Integer rutrum lacus quis felis venenatis porta. 

    <script src='Scripts/jquery-1.4.1.js' type='text/javascript'></script>
    <script src='Scripts/jquery-ui-1.8.1.custom.min.js' 

    #draggable { width: 150px; height: 150px; padding: 0.5em; }

    <script type='text/javascript'>
        $(function () {

All we’re doing here is specifying a class to apply to the area that we want to be draggable then using a jQuery selector to access any page element that uses that class and calling the jQueryUI dragable() method.

Have fun !