Question

我想在拖动可排序结构的任何行时删除工具提示，因为存在故障问题，因为工具提示在行上方或下方移动会产生奇怪的效果。所以我想避免在拖动动作开始时删除工具提示。

我正在使用jquery ui官方页面的可排序示例。

有人知道解决方法吗？

先谢谢你问候

已编辑：已插入代码示例：

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script>
  $( function() {
$("[data-toggle=tooltip]").tooltip();
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
  </script>
</head>
<body>

<ul id="sortable" style="padding:30px">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><label data-toggle="tooltip" data-html="true" title="<h2>Item1</h2>">Item 1</label></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><label data-toggle="tooltip" data-html="true" title="<h2>Item2</h2>">Item 2</label></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><label data-toggle="tooltip" data-html="true" title="<h2>Item3</h2>">Item 3</label></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><label data-toggle="tooltip" data-html="true" title="<h2>Item4</h2>">Item 4</label></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><label data-toggle="tooltip" data-html="true" title="<h2>Item5</h2>">Item 5</label></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><label data-toggle="tooltip" data-html="true" title="<h2>Item6</h2>">Item 6</label></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><label data-toggle="tooltip" data-html="true" title="<h2>Item7</h2>">Item 7</label></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><label data-toggle="tooltip" data-html="true" title="<h2>Item8</h2>">Item 8</label></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><label data-toggle="tooltip" data-html="true" title="<h2>Item9</h2>">Item 9</label></li>
</ul>


</body>
</html>

Answer 1

您有多种可能的解决方案。当hiding对列表进行排序时，一个是start引导工具提示：

$("#sortable").sortable({
  start: function() {
     $("[data-toggle=tooltip]").tooltip('hide');
  }
});

<强> Example

如何在可排序插件中拖动行时删除工具提示？

1 个答案: