Question

I have a jQuery draggable Div and inside it I have a bootstrap dropdown menu, this is my 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>

as you can see from the HTML, I’m talking about the .dropdown-menu ul tag.
Everything looks okay until the <div class="caret"> is being pressed and the dropdown menu is being opened (this is a bootstrapjs feature),

The bug is occurring when the DIV is being dragged again after the bootstrapjs menu opened, and the menu is staying in its place and not moving. Sometimes it gets back to the DIV and sometimes it just stands still. I can’t explain why.

PS Can I give my website address to show people my problem in action?

Answer 1

Unless you need the dropdown to stay open while dragging, you should be able to get around this problem by closing the dropdown menu on drag.

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

You can also make your div not draggable when caret is clicked.

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