Check with your designers to help you design this section
Check with your designers to help you design this section
Sortable component is built on top of Sortable plugin. Since it already has its own documentation and examples, we focused on showing some basic examples that match RAUL custom styles. For more information please check out this page.
You can use any element for the list and its elements, not just
ul
/li
.
<ul class="list-group raul-sortable" id="items">
<li class="list-group-item sortable-handler">
<span>Item 1</span>
</li>
<li class="list-group-item sortable-handler">
<span>Item 2</span>
</li>
<li class="list-group-item sortable-handler">
<span>Item 3</span>
</li>
</ul>
RAUL.sortable.create('#items');
<div class="list-group raul-sortable" id="list-group-example">
<div class="
list-group-item
list-group-item-flex
sortable-handler
justify-content-between
align-items-center
">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="custom-check-1">
<label class="custom-control-label" for="custom-check-1">List item 1</label>
</div>
</div>
<div class="
list-group-item
list-group-item-flex
sortable-handler
justify-content-between
align-items-center
">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="custom-check-2">
<label class="custom-control-label" for="custom-check-2">List item 2</label>
</div>
</div>
<div class="
list-group-item
list-group-item-flex
sortable-handler
justify-content-between
align-items-center
">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="custom-check-3">
<label class="custom-control-label" for="custom-check-3">List item 3</label>
</div>
</div>
<div class="
list-group-item
list-group-item-flex
sortable-handler
justify-content-between
align-items-center
">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="custom-check-4">
<label class="custom-control-label" for="custom-check-4">List item 4</label>
</div>
</div>
<div class="
list-group-item
list-group-item-flex
sortable-handler
justify-content-between
align-items-center
">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="custom-check-5">
<label class="custom-control-label" for="custom-check-5">List item 5</label>
</div>
</div>
</div>
RAUL.sortable.create('#list-group-example');
Sometimes you may need to drag an entire item, but you only want the handle to be a portion of the item. Drag handlers give you this ability.
<div class="list-group raul-sortable" id="list-group-handler-example">
<div class="
list-group-item
list-group-item-flex
justify-content-between
align-items-center
">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="custom-check-11">
<label class="custom-control-label" for="custom-check-11">List item 1</label>
</div>
<button class="btn btn-primary btn-outline sortable-handler">
<i class="fa fa-arrows"></i>
Drag
</button>
</div>
<div class="
list-group-item
list-group-item-flex
justify-content-between
align-items-center
">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="custom-check-12">
<label class="custom-control-label" for="custom-check-12">List item 2</label>
</div>
<button class="btn btn-primary btn-outline sortable-handler">
<i class="fa fa-arrows"></i>
Drag
</button>
</div>
<div class="
list-group-item
list-group-item-flex
justify-content-between
align-items-center
">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="custom-check-13">
<label class="custom-control-label" for="custom-check-13">List item 3</label>
</div>
<button class="btn btn-primary btn-outline sortable-handler">
<i class="fa fa-arrows"></i>
Drag
</button>
</div>
<div class="
list-group-item
list-group-item-flex
justify-content-between
align-items-center
">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="custom-check-14">
<label class="custom-control-label" for="custom-check-14">List item 4</label>
</div>
<button class="btn btn-primary btn-outline sortable-handler">
<i class="fa fa-arrows"></i>
Drag
</button>
</div>
<div class="
list-group-item
list-group-item-flex
justify-content-between
align-items-center
">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="custom-check-15">
<label class="custom-control-label" for="custom-check-15">List item 5</label>
</div>
<button class="btn btn-primary btn-outline sortable-handler">
<i class="fa fa-arrows"></i>
Drag
</button>
</div>
</div>
RAUL.sortable.create(
'#list-group-example',
{
handle: '.sortable-handler'
}
);
Draggable table rows | |
---|---|
Row 1 | Lorem ipsum dolor |
Row 2 | Lorem ipsum dolor |
Row 3 | Lorem ipsum dolor |
Row 4 | Lorem ipsum dolor |
Row 5 | Lorem ipsum dolor |
<table class="table raul-table">
<thead>
<tr>
<th colspan="2">Draggable table rows</th>
</tr>
</thead>
<tbody class="raul-sortable" id="table-example">
<tr class="sortable-handler">
<td>Row 1</td>
<td>
Lorem ipsum dolor
</td>
</tr>
<tr class="sortable-handler">
<td>Row 2</td>
<td>
Lorem ipsum dolor
</td>
</tr>
<tr class="sortable-handler">
<td>Row 3</td>
<td>
Lorem ipsum dolor
</td>
</tr>
<tr class="sortable-handler">
<td>Row 4</td>
<td>
Lorem ipsum dolor
</td>
</tr>
<tr class="sortable-handler">
<td>Row 5</td>
<td>
Lorem ipsum dolor
</td>
</tr>
</tbody>
</table>
RAUL.sortable.create('#table-example');