Angular UI-Bootstrap 弹出框可拖动

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
   }
});