gpt4 book ai didi

javascript - 带有 Sortable 的工具提示给出了意想不到的结果

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:53:36 24 4
gpt4 key购买 nike

我正在使用 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com