2016-09-20 6 views
0

Я хочу удалить всплывающие подсказки при перетаскивании любой строки сортируемой структуры, потому что есть проблема с неисправностью, потому что подсказка перемещается выше или ниже строки, создавая странный эффект. Поэтому я хочу избежать удаления всплывающей подсказки при запуске действия перетаскивания.Как удалить всплывающую подсказку при перетаскивании строки в сортируемый плагин?

Я использую отсортированный пример официальной страницы 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> 
+0

Можете ли вы представить конкретный пример? – empiric

+0

Введен пример кода – Levimatt

ответ

0

У вас есть несколько возможных решений для этого. Можно было бы hiding бутстраповская подсказке, когда вы start сортировки списка:

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

Example

+0

Кажется, он работает, но если я попытаюсь просмотреть результат в браузере, я не вижу изображение со стрелкой в ​​начале каждой строки и прямоугольную форму каждой строки. Любая помощь? – Levimatt

+1

@ Levimatt для 'ui-icon', чтобы работать, вы должны также включить jquery-ui css. – empiric

+0

Спасибо всем за вашу поддержку. Свойство «start» делает трюк, скрывая свойство подсказки, содержащееся в строке. – Levimatt