Draggable Default
Card title 1
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title 1
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title 1
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title 1
Some quick example text to build on the card title and make up the bulk of the card's content.
Usage HTML
<div class="row" id="draggablePanelList">
<div class="col-lg-12 col-xl-3">
<div class="card">
<img class="card-img-top img-fluid" src="img/product/img-3.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title 1</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-lg-12 col-xl-3">
<div class="card">
<img class="card-img-top img-fluid" src="img/product/img-4.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title 1</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-lg-12 col-xl-3">
<div class="card">
<img class="card-img-top img-fluid" src="img/product/img-7.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title 1</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-lg-12 col-xl-3">
<div class="card">
<img class="card-img-top img-fluid" src="img/product/img-8.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title 1</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
JavaScript Include
<!-- Sortable JS-->
<script src="plugins/sortable/js/Sortable.js"></script>
<script>
$(function(){
Sortable.create(draggablePanelList, {
group: 'draggablePanelList',
animation: 150
});
});
</script>
Draggable Multiple List
Multiple list 1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Multiple list 1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Multiple list 3
Lorem Ipsum is simply dummy text of the printing and typesetting industry. when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Multiple list 2
Lorem Ipsum is simply dummy text of the printing and typesetting industry. when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Multiple list 5
Lorem Ipsum is simply dummy text of the printing and typesetting industry. when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Multiple list 4
Lorem Ipsum is simply dummy text of the printing and typesetting industry. when an unknown printer took a galley of type and scrambled it to make a type specimen book.
HTML Usage
<div class="col-md-12" id="draggableMultiple">
<div class="sortable-moves">
<img class="img-circle p-absolute" src="img/users/user1.jpg" alt="">
<h6>Multiple list 1</h6>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="sortable-moves">
<img class="img-circle p-absolute" src="img/users/user2.jpg" alt="" draggable="false">
<h6>Multiple list 1</h6>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="sortable-moves">
<img class="img-circle p-absolute" src="img/users/user3.jpg" alt="">
<h6>Multiple list 3</h6>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="sortable-moves">
<img class="img-circle p-absolute" src="img/users/user4.jpg" alt="" draggable="false">
<h6>Multiple list 2</h6>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="sortable-moves">
<img class="img-circle p-absolute" src="img/users/user5.jpg" alt="">
<h6>Multiple list 5</h6>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="sortable-moves">
<img class="img-circle p-absolute" src="img/users/user6.jpg" alt="" draggable="false">
<h6>Multiple list 4</h6>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
Javascript Usage
<!-- Sortable JS-->
<script src="plugins/sortable/js/Sortable.js"></script>
<script>
$(function(){
Sortable.create(draggableMultiple, {
group: 'draggableMultiple',
animation: 150
});
});
</script>
Draggable Without Images
Card title 1
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title 2
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title 3
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title 4
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title 5
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title 6
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title 7
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title 8
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title 9
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title 10
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title 11
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title 12
Some quick example text to build on the card title and make up the bulk of the card's content.
HTML Usage
<div class="row" id="draggableWithoutImg">
<div class="col-md-6 m-b-20">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title 1</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-6 m-b-20" draggable="false">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title 2</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div><div class="col-md-6">
<div class="card m-b-20">
<div class="card-block">
<h4 class="card-title">Card title 3</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card m-b-20">
<div class="card-block">
<h4 class="card-title">Card title 4</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
Javascript Usage
<!-- Sortable JS-->
<script src="plugins/sortable/js/Sortable.js"></script>
<script>
$(function(){
Sortable.create(draggableWithoutImg, {
group: 'draggableWithoutImg',
animation: 150
});
});
</script>
Andrew Smith