<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="page-content page-container" id="page-content">
<div class="padding">
<div class="row container d-flex justify-content-center">
<div class="col-lg-12 col-xl-6">
<!-- Draggable Multiple List card start -->
<div class="card">
<div class="card-header">
<h5 class="card-header-text">Draggable Multiple List</h5>
</div>
<div class="card-block p-b-0">
<div class="row">
<div class="col-md-12" id="sortable">
<div class="sortable-moves" style=""> <img class="img-fluid p-absolute image-dim" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1557925704/doruk-yemenici-1593970-unsplash.jpg" alt="">
<h6>Product 1</h6>
<p>That might be little bit risky to have crew member like them. For what reason would it be advisable for me to think about business content? That might be little bit risky to have crew member like them.</p>
</div>
<div class="sortable-moves" draggable="false" style=""> <img class="img-fluid p-absolute" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1557925739/marek-levak-1591308-unsplash.jpg" alt="" draggable="false">
<h6>Product 2</h6>
<p>That might be little bit risky to have crew member like them. For what reason would it be advisable for me to think about business content? That might be little bit risky to have crew member like them.</p>
</div>
<div class="sortable-moves" style=""> <img class="img-fluid p-absolute" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1557925606/chen-feng-1594580-unsplash.jpg" alt="">
<h6>Product 3</h6>
<p>That might be little bit risky to have crew member like them. For what reason would it be advisable for me to think about business content? That might be little bit risky to have crew member like them.</p>
</div>
<div class="sortable-moves" style=""> <img class="img-fluid p-absolute" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1557925652/tomas-robertson-1594346-unsplash.jpg" alt="">
<h6>Product 4</h6>
<p>That might be little bit risky to have crew member like them. For what reason would it be advisable for me to think about business content? That might be little bit risky to have crew member like them.</p>
</div>
<div class="sortable-moves" draggable="false" style=""> <img class="img-fluid p-absolute" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1557925606/chen-feng-1594580-unsplash.jpg" alt="" draggable="false">
<h6>Product 5</h6>
<p>That might be little bit risky to have crew member like them. For what reason would it be advisable for me to think about business content? That might be little bit risky to have crew member like them.</p>
</div>
<div class="sortable-moves" style=""> <img class="img-fluid p-absolute" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1557925739/marek-levak-1591308-unsplash.jpg" alt="">
<h6>Product 6</h6>
<p>That might be little bit risky to have crew member like them. For what reason would it be advisable for me to think about business content? That might be little bit risky to have crew member like them.</p>
</div>
</div>
</div>
</div>
</div> <!-- Draggable Multiple List card end -->
</div>
</div>
</div>
</div>
.stretch-card>.card {
width: 100%;
min-width: 100%
}
body {
background-color: #f9f9fa
}
.flex {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto
}
@media (max-width:991.98px) {
.padding {
padding: 1.5rem
}
}
@media (max-width:767.98px) {
.padding {
padding: 1rem
}
}
.padding {
padding: 3rem !important
}
.card-sub {
cursor: move;
border: none;
-webkit-box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.05), 0 -2px 1px -2px rgba(0, 0, 0, 0.04), 0 0 0 -1px rgba(0, 0, 0, 0.05);
box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.05), 0 -2px 1px -2px rgba(0, 0, 0, 0.04), 0 0 0 -1px rgba(0, 0, 0, 0.05)
}
.card-img-top {
width: 100%;
border-top-left-radius: calc(.25rem - 1px);
border-top-right-radius: calc(.25rem - 1px)
}
.card-block {
padding: 1.25rem;
background-color: #fff !important
}
.sortable-moves {
cursor: move;
margin-bottom: 0;
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.14);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.14);
margin-bottom: 20px;
padding: 15px 0 15px 60px
}
.sortable-moves {
font-size: 14px;
line-height: 1.55556em;
list-style-type: none;
margin-bottom: 15px;
min-height: 3.55556em;
padding-left: 5.11111em;
position: relative;
cursor: move;
background-color: #fff
}
.sortable-moves img {
position: absolute;
height: 50px;
width: 50px;
left: 10px;
border-radius: 5px;
top: 15px
}
$( document ).ready(function() {
$("#sortable").sortable();
$("#sortable").disableSelection();
});