Restrict/Constrain window drag to left and top (real-time)

Thread is closed for posting
1 posts, 0 answers
  1. Marin Bratanov
    Marin Bratanov avatar
    23 posts
    Member since:
    Jul 2012

    Posted 15 Feb 2019 Link to this post

    Requirements

    Telerik Product and Version

    UI for ASP.NET AJAX, must support Lightweight Render Mode, so after Q2 2013

    Supported Browsers and Platforms


    Components/Widgets used (JS frameworks, etc.)

    RadWindow and internal draggable widget


    PROJECT DESCRIPTION

     In some cases you may want the restriction to be shown to the user immediately and/or to have some custom restriction like only for minimum top and left positions.

    The built-in restriction zone is static and both it, and the KeepInScreenBounds=true settings allow the user to drag the window out of the bounds, and it will snap back inside.

    A work around for this can be to:

    • use the Lightweight RenderMode
    • use the internal (undocumented, or non-public) "draggable" widget that powers the dragging in this mode, and hook to its dragging event
    • implement the desired logic in the dragging event (an example is available below thanks to Dean Wyant)
    <telerik:RadWindow runat="server" ID="rw1" RenderMode="Lightweight" VisibleOnPageLoad="true" OnClientShow="OnClientShow" OnClientClose="OnClientClose"></telerik:RadWindow>
     
    <script>
        function dragCheck(draggable, args) {
            //constraints for minimum top and left coordinates
            var minX = 0;
            var minY = 50;
            //for more complex restrictions you need to also alter the conditions accordingly
            if (args.get_newPosition().x < minX) {
                draggable.deltaHelper.x = minX - args.get_position().x;
            }
            if (args.get_newPosition().y < minY) {
                draggable.deltaHelper.y = minY - args.get_position().y;
            }
        }
     
        function OnClientShow(sender, args) {
            sender.view.draggable.add_dragging(dragCheck);
        }
     
        function OnClientClose(sender, args) {
            sender.view.draggable.remove_dragging(dragCheck);
        }
    </script>
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.