CODEWITHSUNDEEP
javascripthtmlcssrubaxa-sortable
user1349923
user1349923

Reputation: 843

How to sort the list with transition if the size of items are not the same?

I'm using Sortable from https://github.com/RubaXa/Sortable

How to sort the list with transition if the size of items are not the same?

Here is my example:

// List with handle
Sortable.create(listWithHandle, {
  handle: '.glyphicon-move',
  animation: 1000,
  filter: ".disabled",
  onMove: function(evt) {
    return evt.related.className.indexOf('disabled') === -1;
  }
});
body {
  padding: 10px;
}
.glyphicon-move {
  cursor: move;
  cursor: -webkit-grabbing;
}
ul li:nth-of-type(1) {
  width: 100%;
  height: 100px;
  transition: all 1000ms;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://rawgit.com/RubaXa/Sortable/dev/Sortable.js"></script>
<div id="coolElement"></div>

<!-- List with handle -->
<ul id="listWithHandle" class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    <span class="glyphicon glyphicon-move" aria-hidden="true"></span>
    Drag me by the handle
  </li>
  <li class="list-group-item">
    <span class="badge">2</span>
    <span class="glyphicon glyphicon-move" aria-hidden="true"></span>
    You can also select text
  </li>
  <li class="list-group-item">
    <span class="badge">1</span>
    <span class="glyphicon glyphicon-move" aria-hidden="true"></span>
    Best of both worlds!
  </li>
</ul>

jsbin

I also tried the ghostClass parameter but with no luck.

Upvotes: 0

Views: 133

Answers (0)

Related Questions