Диалог JQuery UI исчезает после операции перетаскивания

Question

На моей странице (страница приложения SharePoint 2010) я определяю простой диалог div:

<div id='corrDlg'>
   <canvas id="corrCanvas" width="250px" height="50px" style="background-color: White; border-color: Black;" ></canvas>
</div>

, который я инициализирую следующим кодом JS:

$('#corrDlg').hide();
$('#corrDlg').dialog( { autoOpen: false, modal : true, zIndex : 3, title: 'Correction Dialog' } ).hide();
$('#corrDlg').touch({ animate: false, sticky: false, dragx: true, dragy: true, rotate: false, resort: true, scale: false });
$('.ui-dialog-titlebar').click(function () { $('#corrDlg').dialog('close'); });
$('.s4-rp').hide();

Затем отображается модальное диалоговое окно из обработчика нажатия кнопки JS:

    $('#corrDlg').dialog("open", "position", "center");

До этого момента все ведет себя как положено: отображается модальное диалоговое окно.

Затем я щелкаю по строке заголовка диалога и перемещаем окно (удерживая кнопку мыши нажатой). Как только я отпущу кнопку мыши, диалоговое окно закроется!

Мне не удалось выяснить путем отладки через jquery-ui.js, какой параметр конфигурации мне не хватает (или был добавлен случайно), который генерирует это неправильное поведение.

Я использую следующие файлы JS и CSS:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.1.min.js"></script>  
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.js"></script>

Описанное выше поведение одинаково для IE9 и Chrome 16 (и более ранних версий).

Answer 1

Если я не читаю ваш скрипт неправильно, он делает то, о чем вы его просили.

$ ('. Ui-dialog-titlebar'). Click (function () {$ ('# corrDlg'). Dialog ('close');});

Это будетзакройте диалоговое окно, если вы нажмете на строку заголовка.Поскольку при перетаскивании вы держите кнопку мыши, щелчок еще не завершен.Когда вы отпускаете кнопку мыши, это щелчок, и диалоговое окно закрывается.

Answer 2

Я бы немного разбил его, чтобы его было проще проверить.

Также вот некоторые документы для справки. http://jqueryui.com/demos/dialog/#option-draggable
Заметил, что это был «перетаскиваемый» вариант. Я не проверял ничего из этого, но, надеюсь, это поможет.

$(document).ready(function(){
    $('#corrD1g').hide();
    $('.s4-rp').hide();  // Not sure what this does

    initialize_dialog();

    // Open Dialog Box a
    // selector = whatever your js button element is. 
    $('selector').live('click', function(){
        open_dialog_box
    });

    $('.ui-dialog-titlebar').live('click', function(){
        close_dialog_box
    });
});

function open_dialog_box() {
  $('#corrDlg').dialog("open", "position", "center");
}

function close_dialog_box() {
   $('#corrDlg').dialog('close');
}


function initialize_dialog() {
      $('#corrDlg').dialog({ 
                 autoOpen: false,
                 draggable: true, 
                 modal : true, 
                 zIndex : 3, 
                 title: 'Correction Dialog' 
      }

      $('#corrDlg').touch({ 
                    animate: false, 
                    sticky: false, 
                    dragx: true, 
                    dragy: true, 
                    rotate: false, 
                    resort: true, 
                    scale: false 
       });
}