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


By default, the Draggable creates an exact clone of the Target Element and uses it as a Hint.

Using the Hint property, you can set a hint-handler (JavaScript function) to change the Draggable element to something else.


<telerik:RadDraggable runat="server" Hint="customHintHandler" TargetSelectors="#CustomHintDraggable">

<div id="CustomHintDraggable"></div>

    function customHintHandler(element) {
        var hintElement = $("<div id='hint'></div>");
            "box-sizing": "border-box",
            "background-image": "url('')",
            "background-repeat": "no-repeat",
            "width": "110px",
            "height": "100px"
        return hintElement;
    #CustomHintDraggable {
        width: 50px;
        height: 50px;
        background-color: orange;
        border: 2px solid green;
In this article