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


Setting the Axis property to either Horizontal or Vertical will restrain the dragged element movement only that axis.


<telerik:RadDraggable runat="server" Axis="Horizontal" TargetSelectors="#HorizontalAxis">

<telerik:RadDraggable runat="server" Axis="Vertical" TargetSelectors="#VerticalAxis">

<div id="HorizontalAxis"></div>
<div id="VerticalAxis"></div>

    #VerticalAxis {
        width: 50px;
        height: 50px;
        border: 2px solid green;
    #HorizontalAxis {
        background-color: orange;
    #VerticalAxis {
        background-color: purple;
In this article