Angular UI-Bootstrap 弹出框可拖动

Posted 2023-05-09

【中文标题】Angular UI-Bootstrap 弹出框可拖动

【英文标题】：Angular UI-Bootstrap popover draggable

【发布时间】：2017-06-10 12:26:37

【问题描述】：

我正在使用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();

【参考方案1】：

您可能需要存储弹出框的最后位置。您可以使用事件拖动来获取当前位置。

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

【讨论】：

我可以得到位置，但是 ui-bootstrap 会重置它，如果我选择在重置后重置它，那么会出现不必要的闪烁

确实是 Bootstrap 问题。 Bootstrap 不允许为弹出框提供自定义位置。一个解决方案可能是创建一个没有 Bootstrap 的自定义弹出框。