Angular UI-Bootstrap Popover可拖動

Question

我正在使用Angular UI-Bootstrap popover，並希望使用jQuery-UI draggable使它可拖動 。 一切都按預期進行，但是UI-Bootstrap重新定位遇到問題。 如果我將鼠標懸停在具有工具提示的元素上或打開另一個彈出窗口，則UI-Bootstrap會重新計算彈出窗口的放置並將其放置到其初始位置。 但我希望它留在它被拖到的地方。 有什么解決方法嗎？

我的代碼樣本

HTML

<button type="button" data-uib-tooltip="Toggle tooltip" data-tooltip-placement="bottom auto" data-tooltip-append-to-body="true" data-tooltip-class="hidden-xs" data-uib-popover-template="'popover.tpl.html'" data-popover-append-to-body="false" data-popover-placement="auto left" data-popover-class="popover-default popover-draggable" data-ng-click="vm.makeDraggable()">
    Toggle popover
</button>

JS

vm.makeDraggable = function() {
    $('.popover-draggable').draggable();
}

Answer 1

您可能需要存儲彈出框的最后一個位置。 您可以使用事件拖動來獲取當前位置。

$( ".popover-draggable" ).draggable({
   drag: function( event, ui ) {
    //get position with ui.position
   }
});