Angular UI-Bootstrap popover draggable

Question

I am using Angular UI-Bootstrap popover and want to make it draggable using jQuery-UI draggable . It all works as supposed to, but I am having an issue with UI-Bootstrap repositioning. If I hover on an element that has tooltip or open another popup, then UI-Bootstrap recalculates the popup placement and puts it to its initial placement. But I would like it to stay where it was dragged. Is there any workaround on this?

My code samples

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

You maybe need to store the last position of the popover. You can use the event drag to get the current position.

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