ポップアップ：ドラッグして移動

PopupコントロールのisDraggableプロパティを使用して、ドラッグ可能なダイアログを作成できます。

例：ドラッグ可能なポップアップダイアログとして表示されるログインフォームを作成します。

PopUp

HTML

<button id="btnLogin" class="btn btn-primary">
    ログイン
</button>

<!-- ログインフォーム -->
<form id="frmLogin" class="custom-animation">
    <h4 class="modal-header">
        ログイン
        <button type="button" tabindex="-1" class="close wj-hide">&times;</button>
    </h4>
    <div class="modal-body">
        <label>
            メール:
            <input class="form-control" required type="email" />
        </label>
        <br />
        <label>
            パスワード:
            <input class="form-control" type="password" required pattern=".{4,}"
                title="4文字以上入力してください。" />
        </label>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="submit">
            ログイン
        </button>
    </div>
</form>

JavaScript

import * as input from '@mescius/wijmo.input';

function init() {
    // フォームを作成します
    let frmLogin = new input.Popup('#frmLogin', {
        isDraggable: true
    });
    //
    // フォームを表示します
    document.querySelector('#btnLogin').addEventListener('click', () => {
        frmLogin.show(true);
    });
}

ポップアップ：ドラッグして移動
HTML
JavaScript