Draggable Dialogs

The Popup control's isDraggable property allows to create draggable dialogs .

Example: Creates a login form to display as a draggable PopUp dialog.

HTML

  <button style="margin: 20px;" id="btnLogin" class="btn btn-primary">
    Log In
  </button>

  <!-- Log In form -->
  <form id="frmLogin">
    <div class="wj-dialog-header">
      Log in
      <button type="button" tabindex="-1" class="close wj-hide">&times;</button>
    </div>
    <div class="wj-dialog-body">
      <label>
        Email:
        <input class="form-control" required type="email" />
      </label>
      <br />
      <label>
        Password:
        <input class="form-control" type="password" required pattern=".{4,}" title="Please enter 4 characters or more." />
      </label>
      <br />
      <label>
        Remember Me
        <input type="checkbox" />
      </label>
      <br />
      <a href="" class="wj-hide-create">Don't have an account yet?</a>
    </div>
    <div class="wj-dialog-footer">
      <button class="btn btn-primary" type="submit">
        Log in
      </button>
    </div>
  </form>

Javascript

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

function init() {
    // create forms
    let frmLogin = new input.Popup('#frmLogin', {
        isDraggable: true
    });
    //
    // show forms
    document.querySelector('#btnLogin').addEventListener('click', () => {
        frmLogin.show(true);
    });
}