Question

我有一个jQuery可拖动的Div，在里面我有一个bootstrap下拉菜单，这是我的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'
});

Bootstrap drop menu和jQuery Draggable bug

1 个答案: