如何在可排序插件中拖動一行時刪除工具提示？

我想在拖動可排序結構的任何行時刪除工具提示，因爲存在故障問題，因爲工具提示會移動到行的上方或下方，從而產生奇怪的效果。所以我想避免它在拖動動作開始時移除工具提示。如何在可排序插件中拖動一行時刪除工具提示？

我使用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>

來源

2016-09-20 Levimatt

你能提供一個實際的例子嗎？ – empiric

插入的代碼示例 – Levimatt

您有這多種可能的解決方案。其中之一是hiding引導提示，當您start排序列表：

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

Example

來源

2016-09-20 18:19:38 empiric

它看起來可行，但如果我嘗試在瀏覽器中查看結果，我無法在每行的開頭和每行的矩形形狀中看到箭頭圖像。任何幫助？ – Levimatt

@Levimatt爲'ui-icon'工作，你也必須包含jquery-ui css。 – empiric

謝謝大家的支持。「開始」屬性做了這個技巧，隱藏了行中包含的tooltip屬性。 – Levimatt

如何在可排序插件中拖動一行時刪除工具提示？

回答

相關問題