我正在使用 bootstrap jquery 和 Sortable .我正在尝试使用第一个盒子的克隆从一个盒子拖到另一个盒子。问题是我有一个工具提示，在我拖动之后工具提示做了一些奇怪的事情。
尝试将 here a 拖到第二个列表，然后将鼠标悬停在 a 上，您将看到问题
$('[data-toggle="tooltip"]').tooltip();
Sortable.create(foo, {
group: {
name : 'foo',
pull : 'clone',
}
});
Sortable.create(bar, {
group: 'foo',
});ul {
list-style: none;
padding: 0;
border : 1px solid blue;
min-height : 20px;
}
li {
background: #eee;
margin: 1px;
padding: 5px 10px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sortable: `put: []` demo</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Sortable.js -->
<script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
</head>
<body>
<br>
<ul id="foo">
<li>here <span data-toggle="tooltip" data-placement="right" title="test">a</span></li>
</ul>
<ul id="bar">
</ul>
</body>
</html>最佳答案
问题是 Sortable 不创建新元素而是克隆第一个元素。所以你可以做的是使用工具提示删除克隆的元素并创建一个新元素。您可以使用 Sortable 的 onClone 属性并使用 evt.clone 这应该可以解决问题
$('[data-toggle="tooltip"]').tooltip();
Sortable.create(foo, {
group: {
name : 'foo',
pull : 'clone'
},
onClone : function(evt) {
var title = $(evt.clone).find('[data-toggle="tooltip"]').data('original-title')
$(evt.clone).find('[data-toggle="tooltip"]').remove()
$(evt.clone).append('<span data-toggle="tooltip" data-placement="right" title="'+title+'">a</span>')
$(evt.clone).find('[data-toggle="tooltip"]').tooltip()
}
});
Sortable.create(bar, {
group: 'foo',
});
关于javascript - 带有 Sortable 的工具提示给出了意想不到的结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53882362/