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

    Area

    Drag the small circle here ...
    ... Or here.

    The DropTargetArea is a good solution for cases where a few elements within the same container needs to be considered as drop zone. It will create а DropTarget from each element that satisfies the FilterSelectors and is located withing the elements targeted by the TargetSelectors.

    • DefaultVB.aspx
    • DefaultVB.aspx.vb
    • styles.css
    <%@ Page Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.DragDropManager.Container.DefaultVB" %>
     
    <%@ 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:RadDropTargetArea runat="server" ID="RadDropTargetArea1" FilterSelectors=".test1, .test2">
                <ClientEvents OnDragEnter="droptargetOnDragEnter" OnDragLeave="droptargetOnDragLeave" OnDrop="droptargetOnDrop" />
            </telerik:RadDropTargetArea>
     
            <div class="demo-section k-content">
                <asp:Panel runat="server" CssClass="drop-target-area" ID="DropTargetPanel">
                    <div class="test1">Drag the small circle here ...</div>
                    <div class="test2">... Or here.</div>
                </asp:Panel>
                <div id="draggable"></div>
            </div>
     
            <script>
                function draggableOnDragStart(sender, args) {
                    $telerik.$("#draggable").addClass("hollow");
                    $telerik.$("#<%= DropTargetPanel.ClientID%>").html("<div class='test1'>(Drop here)</div><div class='test2'>(Drop here)</div>");
                }
     
                function droptargetOnDragEnter(sender, args) {
                    args.get_dropTarget().text("Now you can drop it.");
                }
     
                function droptargetOnDragLeave(sender, args) {
                    args.get_dropTarget().text("(Drop here)");
                }
     
                function droptargetOnDrop(sender, args) {
                    args.get_dropTarget().text("You did great!");
                    args.get_draggable().element.removeClass("hollow");
                }
     
                function draggableOnDragEnd(sender, args) {
                    var draggable = args.get_sender();
                    if (!draggable.dropped) {
                        // drag ended outside of any droptarget
                        $telerik.$("#<%= DropTargetPanel.ClientID%>").html("<div class='test1'>(Try again)</div><div class='test2'>(Try again)</div>");
                    }
     
                    draggable.element.removeClass("hollow");
                }
            </script>
        </div>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance