Form spin

by Craig Martin

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Field Information</title>
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <style>
        .movable {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
            position: relative;
        }

        .admin {
            position: absolute;
            top: 5px;
            right: 5px;
        }

        .admin button {
            margin-right: 5px;
        }

        textarea {
            width: 100%;
        }
    </style>
</head>
<body>
    <div data-role="page" id="page">
        <div data-role="header">
            <h3>Field Information</h3>
        </div>

        <div data-role="content">
            <div id="field-types">
                <h3>Available field types:</h3>
                <div data-role="controlgroup">
                    <a href="#" class="field-type-btn" data-field-type="Text" data-role="button">Text</a>
                    <a href="#" class="field-type-btn" data-field-type="Image" data-role="button">Image</a>
                    <a href="#" class="field-type-btn" data-field-type="Snippet" data-role="button">Snippet</a>
                    <a href="#" class="field-type-btn" data-field-type="HTML" data-role="button">HTML</a>
                </div>
            </div>

            <div id="field-info">
                <h3>Field information:</h3>
                <div id="fields" class="sortable"></div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdn.tiny.cloud/1/your-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <script>
 ...