Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="../node_modules/sortablejs/Sortable.min.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
new Sortable(example1, {
animation: 150,
ghostClass: 'blue-background-class'
});
</script>
<div id="jsSortable" class="list-group">
<div class="list-group-item">Item 1</div>
<div class="list-group-item">Item 2</div>
<div class="list-group-item">Item 3</div>
<div class="list-group-item">Item 4</div>
<div class="list-group-item">Item 5</div>
<div class="list-group-item">Item 6</div>
</div>
<script>
new Sortable(jsSortable, {
animation: 150
});
</script>
Use "group": "listGroupName"
<div class="row">
<div class="col-md-6">
<!-- list group -->
<div id="jsSortableLeft" class="list-group">
<div class="list-group-item">Item 1</div>
<div class="list-group-item">Item 2</div>
<div class="list-group-item">Item 3</div>
<div class="list-group-item">Item 4</div>
<div class="list-group-item">Item 5</div>
<div class="list-group-item">Item 6</div>
</div>
<!-- end list group -->
</div>
<div class="col-md-6">
<!-- list group -->
<div id="jsSortableRight" class="list-group">
<div class="list-group-item bg-light">Item 1</div>
<div class="list-group-item bg-light">Item 2</div>
<div class="list-group-item bg-light">Item 3</div>
<div class="list-group-item bg-light">Item 4</div>
<div class="list-group-item bg-light">Item 5</div>
<div class="list-group-item bg-light">Item 6</div>
</div>
<!-- end list group -->
</div>
</div>
<script>
new Sortable(jsSortableLeft, {
group: 'shared', // set both lists to same group
animation: 150
});
new Sortable(jsSortableRight, {
group: 'shared',
animation: 150
});
</script>
Try sorting the list on the left. It is not possible because it has it's sort option set to false. However, you can still drag from the list on the left to the list on the right.
<div class="row">
<div class="col-md-6">
<!-- list group -->
<div id="disablingSortingLeft" class="list-group">
<div class="list-group-item">Item 1</div>
<div class="list-group-item">Item 2</div>
<div class="list-group-item">Item 3</div>
<div class="list-group-item">Item 4</div>
<div class="list-group-item">Item 5</div>
<div class="list-group-item">Item 6</div>
</div>
<!-- end list group -->
</div>
<div class="col-md-6">
<!-- list group -->
<div id="disablingSortingRight" class="list-group">
<div class="list-group-item bg-light">Item 1</div>
<div class="list-group-item bg-light">Item 2</div>
<div class="list-group-item bg-light">Item 3</div>
<div class="list-group-item bg-light">Item 4</div>
<div class="list-group-item bg-light">Item 5</div>
<div class="list-group-item bg-light">Item 6</div>
</div>
<!-- end list group -->
</div>
</div>
<script>
new Sortable(disablingSortingLeft, {
group: {
name: 'disablingSorting',
pull: 'clone',
put: false // Do not allow items to be put into this list
},
animation: 150,
sort: false // To disable sorting: set sort to false
});
new Sortable(disablingSortingRight, {
group: 'disablingSorting',
animation: 150
});
</script>
<div id="handle" class="list-group">
<div class="list-group-item">
<i class="handle bi-grip-horizontal list-group-icon me-3"></i> Item 1
</div>
<div class="list-group-item">
<i class="handle bi-grip-horizontal list-group-icon me-3"></i> Item 2
</div>
<div class="list-group-item">
<i class="handle bi-grip-horizontal list-group-icon me-3"></i> Item 3
</div>
<div class="list-group-item">
<i class="handle bi-grip-horizontal list-group-icon me-3"></i> Item 4
</div>
<div class="list-group-item">
<i class="handle bi-grip-horizontal list-group-icon me-3"></i> Item 5
</div>
<div class="list-group-item">
<i class="handle bi-grip-horizontal list-group-icon me-3"></i> Item 6
</div>
</div>
<script>
new Sortable(handle, {
handle: '.handle', // handle's class
animation: 150
});
</script>
Use multiple mode.
<div id="jsSortableGrid" class="row">
<div class="col-md-2 mb-3">
<div class="card">
<div class="card-body text-center">1</div>
</div>
</div>
<div class="col-md-2 mb-3">
<div class="card">
<div class="card-body text-center">2</div>
</div>
</div>
<div class="col-md-2 mb-3">
<div class="card">
<div class="card-body text-center">3</div>
</div>
</div>
<div class="col-md-2 mb-3">
<div class="card">
<div class="card-body text-center">4</div>
</div>
</div>
<div class="col-md-2 mb-3">
<div class="card">
<div class="card-body text-center">5</div>
</div>
</div>
<div class="col-md-2 mb-3">
<div class="card">
<div class="card-body text-center">6</div>
</div>
</div>
<div class="col-md-2 mb-3">
<div class="card">
<div class="card-body text-center">7</div>
</div>
</div>
<div class="col-md-2 mb-3">
<div class="card">
<div class="card-body text-center">8</div>
</div>
</div>
<div class="col-md-2 mb-3">
<div class="card">
<div class="card-body text-center">9</div>
</div>
</div>
<div class="col-md-2 mb-3">
<div class="card">
<div class="card-body text-center">10</div>
</div>
</div>
<div class="col-md-2 mb-3">
<div class="card">
<div class="card-body text-center">11</div>
</div>
</div>
<div class="col-md-2 mb-3">
<div class="card">
<div class="card-body text-center">12</div>
</div>
</div>
</div>
<script>
new Sortable(jsSortableGrid, {
animation: 150
});
</script>
<div id="jsSortableNested" class="list-group nested-sortable">
<div class="list-group-item">Item 1</div>
<div class="list-group-item">Item 2</div>
<div class="list-group-item">
<h6>Item 3</h6>
<div id="jsSortableNestedSub" class="list-group nested-sortable">
<div class="list-group-item">Item 3.1</div>
<div class="list-group-item">Item 3.2</div>
<div class="list-group-item">Item 3.3</div>
<div class="list-group-item">Item 3.4</div>
</div>
</div>
<div class="list-group-item">Item 4</div>
<div class="list-group-item">Item 5</div>
<div class="list-group-item">Item 6</div>
</div>
<script>
new Sortable(jsSortableNested, {
group: 'nestedShared',
animation: 150
});
new Sortable(jsSortableNestedSub, {
group: 'nestedShared',
animation: 150
});
</script>