---
title: Sortable
page-header: SortableJS
page-menu: plugins.sortable
page-libs: [sortablejs]
layout: default
permalink: sortable.html
---

<div class="row row-cards">
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Podstawowe użycie</h3>
      </div>
      <div class="card-body">
        <ul class="list-group" data-sortable='{"animation":150}'>
          <li class="list-group-item">Element A</li>
          <li class="list-group-item">Element B</li>
          <li class="list-group-item">Element C</li>
          <li class="list-group-item">Element D</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Dwie listy z przenoszeniem</h3>
      </div>
      <div class="card-body">
        <div class="row g-3">
          <div class="col-sm-6">
            <ul class="list-group" data-sortable='{"group":"shared","animation":150}'>
              <li class="list-group-item">Item 1</li>
              <li class="list-group-item">Item 2</li>
              <li class="list-group-item">Item 3</li>
            </ul>
          </div>
          <div class="col-sm-6">
            <ul class="list-group" data-sortable='{"group":"shared","animation":150}'>
              <li class="list-group-item">Item A</li>
              <li class="list-group-item">Item B</li>
              <li class="list-group-item">Item C</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>