javascript - 如何使 bootstrap 下拉列表可拖动？

Question

这是我的 Bootstrap 下拉列表

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
</div>

我尝试使用代码通过 jQuery UI 在其上实现可拖动

$('.dropdown').draggable();

但我只能在显示下拉菜单时拖动它，而不是在它们隐藏时拖动它。我也不能拖动按钮，只能在 <ui> 上拖动下拉列表。

有人能解释一下问题是什么以及如何解决吗？

Answer 1

这会起作用。您必须阻止按钮点击。

$(document).ready(function() {
        $( ".dropdown" ).draggable({
            cancel: false,
        });
});