Drag-able Listing

Drag-able Listing is a very handy for your visitors.
Click and drag a bootstrap card to the place where you wants it.

Example:

Jane Doe
Age: 23
John Doe
Age: 29
Meerle
Age: 33
Maeva
Age: 24
Maurelle
Age: 29
Marjolijn
Age: 42

<style>
	.row-section .card {list-style:none; margin-bottom:20px;}
	.row-section .card:hover{cursor:grabbing;}
</style>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<div class="container-fluid">
	<div class="row card-columns row-section card-group" id="sortable">

		<div class="col-sm-4">
			<div class="card">
				<div class="card-header"><b>Jane Doe</b></div>
				<div class="card-body">Age: 23</div> 
			</div>
		</div>	

		<div class="col-sm-4">
			<div class="card">	
				<div class="card-header"><b>John Doe</b></div>
				<div class="card-body">Age: 29</div>
			</div>
		</div>	
	
		<div class="col-sm-4">
			<div class="card">	
				<div class="card-header"><b>Meerle</b></div>
				<div class="card-body">Age: 33</div> 
			</div>
		</div>	
	
		<div class="col-sm-4">
			<div class="card">	
			<div class="card-header"><b>Maeva</b></div>
				<div class="card-body">Age: 24</div> 
			</div>
		</div>

		<div class="col-sm-4">
			<div class="card">	
				<div class="card-header"><b>Maurelle</b></div>
				<div class="card-body">Age: 29</div> 
			</div>
		</div>

		<div class="col-sm-4">
			<div class="card">	
				<div class="card-header"><b>Marjolijn</b></div>
				<div class="card-body">Age: 42</div> 
			</div>
		</div>

	</div>	
</div>	

<script>
	$( function() {
		$( "#sortable" ).sortable();
		$( "#sortable" ).disableSelection();
	} );
</script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>

Leave a Reply

Your email address will not be published. Required fields are marked *