jquery-uiダイアログタイトル内にドロップダウンを表示する際の問題

Question

jQuery UIライブラリのDialogコンポーネントを使用しています。タイトルバーの中に簡単なドロップダウン（<select>）を表示したいと思います。コンポーネントはそれを許可します（タイトルバーにはどんなHTMLでも置くことができます）が、問題があります：オペラの周りをマウスで動かすとドロップダウンが激しくなり、他のブラウザ（Chrome、IE9）ではドロップダウンを開くことができません。

私はイベントハンドラを考えてみたり、バブルを取り消したりすることができるイベントに、イベントハンドラを追加しようとしました。具体的には、onclick、onmousedown、onmouseup、onmouseover、onmouseout、onmouseenter、onmouseleaveというイベントを無効にしました。これはChrome/IE9の方が優れていますが、Operaはまだまだちらつきが多いので、何か間違っていると思います。また、これはどういうわけか...間違っているようです。

ドロップダウンを正しく機能させる方法に関するアイデアはありますか？

Answer 1

http://jsfiddle.net/a9ntp/13/

私は今、数分のためにそれをいじりされている、と私はあなたのためのソリューションを持っているかもしれないと思います。私がフィドルを使ったのはこれが初めてのことなので、うまくいかなければ私に知らせてください。私が知る限り、ダイヤルポップアップのタイトルバーはドラッグ可能であるため、この問題が発生します。

var popup = $('<div>Hello world!</div>'); 

$(popup).dialog({title: 'Text <select id="dropDown"><option>A</option><option>B</option><option>C</option><option>D</option></select>', draggable: false}); 

$('#dropDown').hover(
    function(){ 
     $(popup).dialog('option', 'draggable', true); 
    }, 
    function(){ 
     $(popup).dialog('option', 'draggable', false); 
    } 
); 

マウスをドロップダウンリストに置くと、ドラッグを無効にしてオブジェクトを選択できます。ドロップダウンリストを終了すると、ドラッグ機能を再初期化する必要があります。助けてくれること、または少なくともあなたに取り組むためのアイデアがあることを願っています！

Answer 2

これには約2年遅れましたが、同じ問題があり、私が共有したい簡単な解決策に終わったのです。

jQuery UIダイアログでは、ドラッグすると、デフォルトで.ui-dialog-content（ダイアログの内容）と.ui-dialog-titlebar-close（タイトル要素の右上の閉じるボタン）が無視されます。これは、次のコードで行われます。

this.uiDialog.draggable({ 
     cancel: ".ui-dialog-content, .ui-dialog-titlebar-close", 
     ... 
    }); 

これはタイトル要素に追加されるものと同じ動作です。私は私がそこにキャンセル、変更することを選んだ理由は、オープン方法、で私のドロップダウンを追加している

$(dialog).appendTo('body').showDialog({ 
      ... 
      dialogClass: 'dialog-quick-select', 
      open: function(event, ui) { 
       var dropdownHtml = '<select id="market-set-dropdown"></select>'; 
       var $currentDialog = $('.dialog-quick-select'); 

       $('.ui-dialog-titlebar', $currentDialog).append(dropdownHtml); 

       //this is needed to allow the dropdown to be opened. 
       $currentDialog.draggable({ 
        cancel: '.ui-dialog-content, .ui-dialog-titlebar-close, #market-set-dropdown' 
       }); 
      } 
     }); 

：私は、次のコードを使用して、「リストをキャンセル」ドラッグ可能に私のドロップダウンを追加することができました。また、私のコードはdialogClassオプションで設定されたダイアログに割り当てられたカスタムクラス名に依存していることにも注意してください。

さらに、ダイアログで事前定義されたクラス名（.ui-dialog-contentおよび.ui-dialog-titlebar-close）がキャンセルされた場合、これらの要素は機能しなくなります。 jQueryのUIダイアログの

API：http://api.jqueryui.com/dialog/