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

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"); 

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

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

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

Я использую folloing 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 
     }); 
}