在jquery ui对话框标题中显示下拉列表时出现问题

我正在使用jQueryUI库中的对话框组件。我想在它的标题栏中显示一个简单的下拉列表（

）。该组件允许这样做（任何HTML都可以放在标题栏中），但它也有问题：在Opera中移动鼠标会使下拉列表闪烁很多，而在其他浏览器（Chrome、IE9）中，下拉列表无法打开

我已经尝试将事件处理程序添加到尽可能多的事件中，并取消对它们的冒泡。更具体地说，我禁用了以下事件：onclick、onmousedown、onmouseup、onmouseover、onmouseout、onmouseenter、onmouseleave。这使它在Chrome/IE9中变得更好，但Opera仍然闪烁很多，所以我认为还是有问题。而且，这似乎有点。。。错

关于如何使下拉列表在其中正常工作，有什么想法吗？

我已经搞乱了几分钟了，我想我可能会有一个解决方案给你。这是我第一次使用小提琴，所以如果它不起作用，请告诉我。据我所知，出现这个问题是因为dialgo弹出窗口上的标题栏是可拖动的

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

var popup=$（'Hello world！'）；
$（弹出）.dialog（{title:'Text ABCD'，draggable:false}）；
$（“#下拉列表”）。悬停(
函数（）{
$（弹出）。对话框（'option'，'draggable'，true）；
},
函数（）{
$（弹出）.dialog（'option'，'draggable'，false）；
}
);

当鼠标悬停在下拉列表上时，它将禁用拖动，让您选择对象。当它离开下拉列表时，应该重新初始化拖动功能。希望这对你有所帮助，或者至少给你一些想法去做

我已经搞乱了几分钟了，我想我可能会有一个解决方案给你。这是我第一次使用小提琴，所以如果它不起作用，请告诉我。据我所知，出现这个问题是因为dialgo弹出窗口上的标题栏是可拖动的

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

var popup=$（'Hello world！'）；
$（弹出）.dialog（{title:'Text ABCD'，draggable:false}）；
$（“#下拉列表”）。悬停(
函数（）{
$（弹出）。对话框（'option'，'draggable'，true）；
},
函数（）{
$（弹出）.dialog（'option'，'draggable'，false）；
}
);

---

当鼠标悬停在下拉列表上时，它将禁用拖动，让您选择对象。当它离开下拉列表时，应该重新初始化拖动功能。希望这对你有所帮助，或者至少给你一些想法去做

回答这个问题几乎晚了两年，但我遇到了同样的问题，最终得到了一个更简单的解决方案，我想与大家分享

默认情况下，jQuery UI对话框在拖动时忽略.UI对话框内容（对话框内容）和.UI对话框标题栏关闭（标题元素中的右上角关闭按钮）。这是通过以下代码完成的：

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

这与添加到title元素的任何内容所需的行为相同。我可以使用以下代码将下拉列表添加到可拖动的“取消列表”中：

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

$（对话框）.appendTo（'body'）.showDialog({
...
dialogClass:“对话框快速选择”，
打开：功能（事件、用户界面）{
var dropdownHtml=''；
变量$currentDialog=$（'.dialog快速选择'）；
$（'.ui对话框标题栏'，$currentDialog.append（dropdownHtml）；
//这是打开下拉列表所必需的。
$currentDialog.draggable({
取消：'.ui对话框内容，.ui对话框标题栏关闭，#市场集下拉列表'
});
}
});

我在open方法中添加了我的下拉列表，这就是为什么我选择在那里修改cancel。还要注意，我的代码依赖于分配给对话框的自定义类名，该类名是使用dialogClass选项设置的

还有一个注意事项，如果对话框预定义的类名发生了更改（.ui dialog content和.ui dialog titlebar close），取消将不再适用于这些元素

---

jQueryUI对话框的API:

回答这个问题几乎晚了两年，但我也遇到了同样的问题，最终得到了一个更简单的解决方案，我想与大家分享

默认情况下，jQuery UI对话框在拖动时忽略.UI对话框内容（对话框内容）和.UI对话框标题栏关闭（标题元素中的右上角关闭按钮）。这是通过以下代码完成的：

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

这与添加到title元素的任何内容所需的行为相同。我可以使用以下代码将下拉列表添加到可拖动的“取消列表”中：

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

$（对话框）.appendTo（'body'）.showDialog({
...
dialogClass:“对话框快速选择”，
打开：功能（事件、用户界面）{
var dropdownHtml=''；
变量$currentDialog=$（'.dialog快速选择'）；
$（'.ui对话框标题栏'，$currentDialog.append（dropdownHtml）；
//这是打开下拉列表所必需的。
$currentDialog.draggable({
取消：'.ui对话框内容，.ui对话框标题栏关闭，#市场集下拉列表'
});
}
});

我在open方法中添加了我的下拉列表，这就是为什么我选择在那里修改cancel。还要注意，我的代码依赖于分配给对话框的自定义类名，该类名是使用dialogClass选项设置的

还有一个注意事项，如果对话框预定义的类名发生了更改（.ui dialog content和.ui dialog titlebar close），取消将不再适用于这些元素

---

jQuery UI对话框的API:

您能发布您的实现吗？这里：您不知道我的想法。你不是通灵者。嗯，我没有看到任何奇怪的歌剧行为，但我看到了Chrome的问题，选择不打开。HTML看起来很好，控制台没有显示任何内容。这感觉像是一个奇怪的z索引或溢出问题，但我似乎无法回避。jQuery/Chr