New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WebForms DragDropManager Overview

Drag the small circle here.
  • Demo Configurator
  • Configuration

About DragDropManager for ASP.NET AJAX

The combination of the new RadDraggable, RadDropTarget and RadDropTargetArea controls allow for giving any element on the page drag and drop functionality with just a few lines of code. Each of this controls can be used as a standalone and does not depend on the others.

The DragDropManager control provides an easy way to declare and reuse settings for the RadDraggable, RadDropTarget and RadDropTargetArea controls. This also allows to create new instances of draggables and drop targets on the fly with no postback required.

RadDragDropManager and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Rich client-side functionality
  • Touch devices support
  • Easy way to implement drag-and-drop scenarios
  • Client events to allow control behavior when dragging, hovering over or dropping elements
  • Restraining hovering and drop locations
  • Custom hint visualization of the currently dragged element
  • Locking movement on a vertical or horizontal axis
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.DragDropManager.Overview.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-narrow">
        <telerik:RadDraggable runat="server" ID="RadDraggable1" TargetSelectors="#draggable">
            <ClientEvents OnDragStart="draggableOnDragStart" OnDragEnd="draggableOnDragEnd" />
        </telerik:RadDraggable>
        <telerik:RadDropTarget runat="server" ID="RadDropTarget1">
            <ClientEvents OnDragEnter="droptargetOnDragEnter" OnDragLeave="droptargetOnDragLeave" OnDrop="droptargetOnDrop" />
        </telerik:RadDropTarget>
        <div id="example">
            <div class="demo-section k-content">
                <asp:Panel ID="droptarget" runat="server" CssClass="k-header drop-target">Drag the small circle here.</asp:Panel>
                <div id="draggable" class="draggable"></div>
            </div>
        </div>
    </div>
    <script>
        function draggableOnDragStart(sender, args) {
            var kendoDraggable = args.get_sender();
            var target = args.get_target();

            var draggableElemenets = $find("<%= RadDraggable1.ClientID %>").get_elements();
            draggableElemenets.addClass("hollow");

            var dropTargetElements = $find("<%= RadDropTarget1.ClientID %>").get_elements();

            dropTargetElements.text("Drop here.");
            dropTargetElements.removeClass("painted");
        }

        function droptargetOnDragEnter(sender, args) {
            var kendoDraggable = args.get_draggable();
            var dropTargetElement = args.get_dropTarget();
            dropTargetElement.text("Now drop...");
            dropTargetElement.addClass("painted");
        }

        function droptargetOnDragLeave(sender, args) {
            var kendoDropTarget = args.get_sender();
            var kendoDraggable = args.get_draggable();
            var dropTargetElement = args.get_dropTarget();
            var targetElement = args.get_target();

            dropTargetElement.text("Drop here.");
            dropTargetElement.removeClass("painted");
        }

        function droptargetOnDrop(sender, args) {
            var kendoDraggable = args.get_draggable();
            var kendoDropTarget = args.get_sender();
            var dropTargetElement = args.get_dropTarget();
            var targetElement = args.get_target();

            dropTargetElement.text("You did great!");
            kendoDraggable.element.removeClass("hollow");
        }

        function draggableOnDragEnd(sender, args) {
            if (!sender.get_dropped()) {
                // drag ended outside of any droptarget
                var dropTargetElements = $find("<%= RadDropTarget1.ClientID %>").get_elements();
                dropTargetElements.text("Try again!");
            }

            sender.get_elements().removeClass("hollow");
        }

        function onAxisSelectionChanged(sender, args) {
            var draggable = $find("<%= RadDraggable1.ClientID %>");
            draggable.set_axis(args.get_item().get_value());
        }
        function OnCursorOffsetChanged(sender, args) {
            var draggable = $find("<%= RadDraggable1.ClientID %>");
            var checked = $find("<%= CursorOffsetCheckbox.ClientID %>").get_checked();
            var cursorOffsetTop = $find("<%= NumericCursorOffsetTop.ClientID %>").get_value();
            var cursorOffsetLeft = $find("<%= NumericCursorOffsetLeft.ClientID %>").get_value();

            if (checked) {
                draggable.set_cursorOffset({ top: cursorOffsetTop, left: cursorOffsetLeft });
            } else {
                draggable.set_cursorOffset(null);
            }
        }
    </script>
    <asp:Panel ID="Panel1" runat="server">
        <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server">
            <Views>
                <qsf:View Title="Configuration">
                    <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                        <ul class="fb-group">
                            <li>
                                <qsf:ComboBox ID="rcbAxis" runat="server" Label="Axis" AutoPostBack="false" Size="Wide" OnClientSelectedIndexChanged="onAxisSelectionChanged">
                                    <Items>
                                        <telerik:RadComboBoxItem Value="0" Selected="true" Text="(none)"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Value="1" Text="Horizontal (x)"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Value="2" Text="Vertical (y)"></telerik:RadComboBoxItem>
                                    </Items>
                                </qsf:ComboBox>
                            </li>
                            <li>
                                <span class="checkbox">
                                    <telerik:RadCheckBox ID="CursorOffsetCheckbox" AutoPostBack="false" runat="server" Text="Enable CursorOffset" OnClientCheckedChanged="OnCursorOffsetChanged"></telerik:RadCheckBox>
                                </span>
                            </li>
                            <li>
                                <qsf:NumericTextBox ID="NumericCursorOffsetTop" runat="server" IncrementSettings-Step="5" NumberFormat-DecimalDigits="0" Label="CursorOffset - Top" Value="-80" Size="Wide">
                                    <ClientEvents OnValueChanged="OnCursorOffsetChanged" />
                                </qsf:NumericTextBox>
                            </li>
                            <li>
                                <qsf:NumericTextBox ID="NumericCursorOffsetLeft" runat="server" IncrementSettings-Step="5" NumberFormat-DecimalDigits="0" Label="CursorOffset - Left" Value="20" Size="Wide">
                                    <ClientEvents OnValueChanged="OnCursorOffsetChanged" />
                                </qsf:NumericTextBox>
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
            </Views>
        </qsf:ConfiguratorPanel>
    </asp:Panel>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance