Sortablejs - how can exclude element from sorting

user_5462334 0
Viewed 408

Using Sortable.js I'm trying to make only Collapsible elements change their order so if I move element #1 in the place of element #2 they don't affect the green line between them. I've tried filter option but it just blocks my green line element to be draggable but I can put any element in place of it which I want to block. Is it possible to make with library like that?

enter image description here

sortablejs
1 Answers

Since I mentioned using swap, here's a demo that may work (I know it's late but for the record)

Sortable.create(list, {
  draggable: ".list-group-item",
  filter: ".divider",
  swap: true,
  swapClass: "highlight",
  animation: 150,

});
body {
  padding: 1em;
  text-align: center;
}

.highlight {
  background-color: #f9c7c8 !important;
}

.divider {
  height: 20px;
  background: green;
  width: 3px;
  margin-left: 50%
}
<script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />

<div id="list" class="list-group">
  <div class="list-group-item">Item 1</div>
  <div class="divider"></div>
  <div class="list-group-item">Item 2</div>
  <div class="divider"></div>
  <div class="list-group-item">Item 3</div>
</div>

user_5590790
Related