jube-fork/Jube.App/wwwroot/kendo/examples/window/constrain-movement.html

<!DOCTYPE html>
<html>
<head>
    <title>Constrain movement</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">
    <div id="container">
        <div id="window">
            <p>Alvar Aalto is one of the greatest names in modern architecture and design.
               Glassblowers at the iittala factory still meticulously handcraft the legendary vases
               that are variations on one theme, fluid organic shapes that let the end user decide the use.
            </p>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $("#window").kendoWindow({
                width: "300px",
                height: "250px",
                draggable: {
                    containment: "#container"
                },
                title: "About Alvar Aalto",
                actions: ["Minimize", "Maximize", "Pin"]
            }).data("kendoWindow").open();
        });
    </script>

    <style>
        #container {
            height: 400px;
            width: 600px;
            position: relative;
            border: 1px solid rgba(20,53,80,0.14);
        }
    </style>
</div>


    
</body>
</html>