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

Container

Foo
  • Demo Configurator
  • Configuration

The ContainerSelectors property of the RadDraggable allows for restraining the movement of the hint element when dragging. In this example, the movement of the hint element can be constrained within the blue, purple or green borders, based on the chosen container selector.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.DragDropManager.Container.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-item" ContainerSelectors=".draggable-container.blue">
        </telerik:RadDraggable>

        <div class="draggable-container green">
            <div class="draggable-container purple">
                <div class="draggable-container blue">
                    <div id="draggable-item" class="draggable-item">Foo</div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function OnContainerChanged(sender, args) {
            var draggable = $find("<%= RadDraggable1.ClientID %>");
            draggable.set_containerSelectors(".draggable-container." + args.get_item().get_value());
        }
    </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="Container" AutoPostBack="false" Size="Wide" OnClientSelectedIndexChanged="OnContainerChanged">
                                    <Items>
                                        <telerik:RadComboBoxItem Value="blue" Selected="true" Text="Blue box"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Value="purple" Text="Purple box"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Value="green" Text="Green box"></telerik:RadComboBoxItem>
                                    </Items>
                                </qsf:ComboBox>
                            </li>

                        </ul>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
            </Views>
        </qsf:ConfiguratorPanel>
    </asp:Panel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance