jQueryのUIのダイアログが私のページ（SharePoint 2010のアプリケーションページ）では、ドラッグ操作

Question

後に消え、私は簡単なダイアログdiv要素を定義します。

私は、次のJSコードで初期化

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

：

$('#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ボタンのクリックハンドラ内から表示されます。

これまですべてbeha期待通りに：モーダルダイアログが表示されます。

（ボタンがクリックされたマウスを維持しながら）私はその後ダイアログのタイトルバーをクリックしては、ウィンドウを移動します。 マウスボタンを離すとすぐにダイアログウィンドウが閉じます！

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'）をクリックします（function（）{$（ '＃corrDlg'）。

タイトルバーをクリックするとダイアログが閉じます。ドラッグするとマウスボタンが押されているので、クリックはまだ完了していません。マウスボタンを放すと、それはクリックであり、ダイアログが閉じます。

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