jQuery UI Library - necessary jQuery file and version

The latest versions of QueryUI library have some quirks to note when adding its necessary references in the section. Below is examples that work and examples that do not work.

Basically when using jQuery UI version 1.11.4 or later, do not use jQuery version 2.x.x. Use jQuery version 1.10.x ~ 1.12.x without the jquery-migrate library.

// Works!
<link rel="stylesheet" href="jquery-ui-1.11.4/jquery-ui.css">
<script type="text/javascript" src="jquery-1.12.0.js"></script>
<script type="text/javascript" src="jquery-ui-1.11.4/jquery-ui.js"></script>

// Works!
<link rel="stylesheet" href="jquery-ui-1.11.4/jquery-ui.css">
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.11.4/jquery-ui.js"></script>

// Does Not Work!
<link rel="stylesheet" href="jquery-ui-1.11.4/jquery-ui.css">
<script type="text/javascript" src="jquery-1.12.0.js"></script>
<script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.11.4/jquery-ui.js"></script>

// Does Not Work!
<link rel="stylesheet" href="jquery-ui-1.11.4/jquery-ui.css">
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.11.4/jquery-ui.js"></script>

// Does Not Work!
<link rel="stylesheet" href="jquery-ui-1.11.4/jquery-ui.css">
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="jquery-ui-1.11.4/jquery-ui.js"></script>

Remove containment from draggable jQuery UI Dialog

By default,  a draggable jQuery UI Dialog has containtment such that when you drag the dialog, you will be restricted by the browser's window. While comparing this default behavior against SharePoint's modal detail/edit dialog, SharePoint's dialog feels more user friendly and natural, because it lets users drag the dialog beyond the browser window. It simply feels natural to be able to move around the modal dialog outside browser window so that you can view the underlying main page's data as much as possible.

To remove containment from a draggable jQuery UI Dialog, try the following.
The trick is to use draggable's containtment property via widget of the dialog.

// Button that opens the dialog and a div to be used as the dialog
<input type="button" id="btnOpenDialog" value="Open Dialog" />
<div id="dialog"></div>

<script type="text/javascript">
  var myDialog = null; // global variable
  $(function(){
    $('#btnOpenDialog').on('click', function(){

      // Step 1.
      // Get the dialog ready.
      myDialog = $('#dialog').dialog({
        autoOpen: false, modal: true, resizable: true, width: 400, 
        buttons: {
          OK: function(){ // perform some actions ...},
          Cancel: function(){ $(this).dialog('close'); } // close the dialog 
        }
      });
      
      // Step 2.
      // `myDialog` is a global variable and has a reference to the dialog.
      // Use `myDialog` to remove containment from the dialog.
      myDialog.dialog("widget").draggable({ containment: false });

      // Step 3.
      // Show the dialog
      myDialog.dialog("open");

    });
  });
  
</script>

jQuery UI dialog jump issue workaround

When jQueryUI Dialog is used with "draggable = on", it would jump down by the scroll offset of parent page when the Dialog is being dragged via mouse. One of the nice workarounds to keep the draggable jQuery UI dialog in proper position without "jumping down" would be to set the dialog's parent position to 'fixed'. (By the way, this is the default behavior of Bootstrap's default modal window behavior, too.)

Below is a simple example to implement this workaround to a jQuery UI dialog. This works equally well for both modal and non-modal dialogs.

$(function(){
  $('#dialog_1').dialog({
    autoOpen: false,
    create: function( event ){  
      // set dialog's parent position to 'fixed' under the create event    
      $( event.target ).parent().css( 'position', 'fixed' );
    }
  });
  $('#btn_1').click(function(){
    // to reposition the dialog to the center when re-opened
    $('#dialog_1').dialog( 'option', 'position', 'center' );
    $('#dialog_1').dialog( 'open' );
  });
});

Hopefully, this workaround will provide better user experience on top of all the great features in jQuery UI library.