Bootstrap 下拉菜单和 jQuery Draggable 错误

Question

我有一个 jQuery 可拖动 Div，里面有一个引导下拉菜单，这是我的 HTML：

<div id="widget_clock" class="widget_common ui-widget-content ui-corner-all ui-draggable" style="z-index: 1001; left: 651px; top: 0px; ">
<div>
    <div class="btn-group" style="float:right;text-align:left">
        <a class="btn btn-large" href="#" id="btn_SetAlarm"><em class="icon-time" style="margin-top: 4px;"></em>  Set Alarm</a>
        <a class="btn btn-large dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
        <ul class="dropdown-menu" id="alarm_recent_times">
            <li class="recent_times_header nav-header" style="padding-right:20px; padding-left:20px">No Recent times</li>
        </ul>
    </div>
</div>

正如您从 HTML 中看到的，我说的是 .dropdown-menu ul 标记。 在按下 <div class="caret"> 并打开下拉菜单（这是 bootstrapjs 功能）之前，一切看起来都很好，

在 bootstrapjs 菜单打开后再次拖动 DIV 时会出现该错误，并且菜单保持在其位置而不移动。有时它会回到 DIV，有时它只是静止不动。我无法解释为什么。

PS我可以提供我的网站地址以向人们展示我的问题吗？

Answer 1

除非您需要下拉菜单在拖动时保持打开状态，否则您应该可以通过在拖动时关闭下拉菜单来解决此问题。

$(".ui-draggable").draggable({
  start: function() {
    $('.ui-draggable .open').removeClass('open');
  }
});

您还可以使您的 div 在单击插入符号时不可拖动。

$(".ui-draggable").draggable({
  cancel: 'a.dropdown-toggle'
});