title: jQuery sortable with Modal to confirm move
body: <p>I have a slight dilemma with using jQuery's sortable feature and a modal pop-up.  What I have is a sortable list and a sort order starting from 1. If an item below 1 is moved above position 1, I need to prompt using a modal the user that they are moving an item above the default value and this will become the default value.  The user at this point in time can either click ok or cancel. If cancel is selected then I need to revert the selection to it's original position.  The problem I am having is that when I call then function in stop to show the modal, the sortable code still executes the code in the background.  By the time I receive back the answer from the modal, I can no longer access the previous value to revert the sortable item.  </p>
  
  <p>I am able to acheive my above goal with alert() but I need a modal, any help is appreciated!</p>
  
  <pre><code>$(".moduleSettingsGridView tbody").sortable({
               items: 'tr:not(tr:first-child)',
               containment: "parent",
               start: function(event, ui) {
                   ui.item.data('start_pos', ui.item.index());
               },
               stop: function(event, ui) {
                   var start_pos = ui.item.data('start_pos');
                   var index = ui.item.index();
                   var maxSortPos = [];
                   $('.moduleSettingsGridView tbody tr:not(tr:first-child)').each(function() {
                       if ($(this).find('.chbActive input').prop("checked")) {
                           maxSortPos.push($(this).closest('tr').index());
                       }
                   });
                   max = Math.min.apply(Math, maxSortPos);
                   var newpos = ui.item.index();
                   var item = $(this).find('.chbActive input').prop("checked");
                   if ((index &lt;= max) &amp;&amp; (item)) {
                       dialog_confirm();
                       function dialog_confirm() {
                           var defer = $.Deferred();
                           $('#modal_confirm_yes_no').dialog({
                               autoOpen: true,
                               height: 140,
                               modal: true,
                               buttons: {
                               "Submit": function() {
                                       defer.resolve("yes");
                                       $(this).dialog("close");
                                       dialog_confirm_callback(true);
                                   },
                                   Cancel: function() {
                                       defer.reject("no");
                                       $(this).dialog("close");
                                       dialog_confirm_callback(false);
                                   }
                               }
                           });
                           return defer.promise();
  
                       }
                       function dialog_confirm_callback(value) {
                           if (value) {
                               $(this).append(ui.sortable);
                           } else {
                              $(this).sortable('cancel');
                              $(ui.sender).sortable('cancel');
                           }
                       }
  update: function(event, ui) { UpdateSortOrder(); },
               helper: function(e, tr) {
                   var $originals = tr.children();
                   var $helper = tr.clone();
                   $helper.children().each(function(index) {
                       // Set helper cell sizes to match the original sizes
                       $(this).width($originals.eq(index).width())
                   });
                   return $helper;
               }
           }).disableSelection();
           $(".moduleSettingsGridView tbody tr:not(tr:first-child)").hover(function() { $(this).css("cursor", "Pointer"); });
  </code></pre>