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

Angular UI-Bootstrap popover draggable

1 个答案: