Question

我有一个包含一些可以拖放的缩略图的div。当一个缩略图放在另一个缩略图的顶部时，它们会切换位置。我使用AngularJS并在$ scope上操作底层数据。

无论如何，这是问题所在：

当我将鼠标悬停在缩略图上时，缩略图会打开工具提示。当我单击并开始拖动缩略图（让我们将其称为源缩略图）时，其工具提示会消失（应该如此）。到现在为止还挺好。但是，当我将缩略图放在另一个上方时，会出现目标缩略图的工具提示出现的短暂时刻，因为鼠标当前正悬停在目标工具提示上。

一瞬间，底层模型交换两个数据，DOM更新以反映更改 - 有效地交换两个缩略图。现在，目标的工具提示仍处于打开状态，但我的鼠标不再超过目标，因为它刚刚被交换！工具提示将保持打开状态，直到我在新位置重新触发工具提示事件。

大约50％的时间都会观察到这种行为，但是我可以通过在更改基础数据之前添加一个短的（~1秒）延迟来人为地重现它，导致缩略图切换位置。

注意：Chrome中不会出现此问题，但在Firefox和IE中会出现此问题。我没有尝试过Safari。

有没有人遇到过这个问题，或类似的问题？如果我能提供任何进一步的细节，请告诉我。谢谢！

编辑：这是一个说明问题的jsfiddle示例：jsfiddle

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script>
        $.widget.bridge('uitooltip', $.ui.tooltip);
    </script>

<div ng-app="myApp">
    <div ng-controller="ContentController">
        <div class="indent">
            <div ng-repeat="square in squares" style="width: 400px">
                <item data="square" helper="helperFunction"></item>
            </div>
            Drag the top box onto the bottom box and keep the mouse cursor stationary for ~1 second.  The tooltip will be stuck open when the boxes switch places.  Dragging the bottom box to the top box, however, does not have this problem.
            <br><br>
            Also, this problem seems to only be present in Firefox and IE.  Chrome works as expected.
        </div>
    </div>
</div>

Answer 1

您可以使用jquery版本替换默认浏览器工具提示：

$('*').tooltip({track: true});

然后，您可以在拖动元素时将工具提示设置为禁用：

$('.thumbnail').tooltip('disable');

开启时，再次启用它们：

$('.thumbnail').tooltip('enable');

http://jsfiddle.net/uHuDp/1/

编辑：为您的示例：

 $(element).find("span.item-outer").uitooltip('disable');
 $(element).find("span.item-outer").uitooltip('enable');

http://jsfiddle.net/uHuDp/260/

当源DOM元素移动时，jQuery UI工具提示被打开

1 个答案: