Question

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

Answer 1

问题是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',
});

带有Sortable的工具提示提供了意外的结果

1 个答案: