Dragula

Simple Drag and Drop Example

Just specify the data attribute data-plugin='dragula' to have drag and drop support in your container.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Make sure to include following js files at end of body element

                                                    <script src="assets/vendor/dragula/dragula.min.js"></script>
<script src="assets/js/ui/component.dragula.js"></script>
<div class="row" id="simple-dragula" data-plugin="dragula">
<div class="col-md-4">
<div class="card mb-0 mt-3 text-white bg-primary">
<div class="card-body">
<blockquote class="card-bodyquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div> <!-- end card-body-->
</div> <!-- end card-->
</div> <!-- end col-->

<div class="col-md-4">
<div class="card mb-0 mt-3 bg-secondary text-white">
<div class="card-body">
<blockquote class="card-bodyquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div> <!-- end card-body-->
</div> <!-- end card-->
</div> <!-- end col-->

<div class="col-md-4">
<div class="card mb-0 mt-3 text-white bg-success">
<div class="card-body">
<blockquote class="card-bodyquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div> <!-- end card-body-->
</div> <!-- end card-->
</div> <!-- end col-->

<div class="col-md-4">
<div class="card mb-0 mt-3 text-white bg-info text-xs-center">
<div class="card-body">
<blockquote class="card-bodyquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div> <!-- end card-body-->
</div> <!-- end card-->
</div> <!-- end col-->

<div class="col-md-4">
<div class="card mb-0 mt-3 text-white bg-warning text-xs-center">
<div class="card-body">
<blockquote class="card-bodyquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div> <!-- end card-body-->
</div> <!-- end card-->
</div> <!-- end col-->

<div class="col-md-4">
<div class="card mb-0 mt-3 text-white bg-danger text-xs-center">
<div class="card-body">
<blockquote class="card-bodyquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div> <!-- end card-body-->
</div> <!-- end card-->
</div> <!-- end col-->
</div>
<!-- end row-->

Move stuff between containers

Just specify the data attribute data-plugin='dragula' and data-containers='["first-container-id", "second-container-id"]'.

Part 1
image
Louis K. Bond

Founder & CEO

"Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.

image
Dennis N. Cloutier

Software Engineer

"Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.

image
Susan J. Sander

Web Designer

"Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.

Part 2
image
James M. Short

Web Developer

"Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh

image
Gabriel J. Snyder

Business Analyst

"Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh

image
Louie C. Mason

Human Resources

"Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh

Make sure to include following js files at end of body element

                                                    <script src="assets/vendor/dragula/dragula.min.js"></script>
<script src="assets/js/ui/component.dragula.js"></script>
<div class="row" data-plugin="dragula" data-containers='["company-list-left", "company-list-right"]'>
<div class="col-md-6">
<div class="bg-dragula p-2 p-lg-4">
<h5 class="mt-0">Part 1</h5>
<div id="company-list-left" class="py-2">

<div class="card mb-0 mt-2">
<div class="card-body">
<div class="d-flex align-items-start">
<img src="assets/images/users/avatar-1.jpg" alt="image" class="me-3 d-none d-sm-block avatar-sm rounded-circle">
<div class="w-100 overflow-hidden">
<h5 class="mb-1 mt-0">Louis K. Bond</h5>
<p> Founder & CEO </p>
<p class="mb-0 text-muted">
<span class="fst-italic"><b>"</b>Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.</span>
</p>
</div> <!-- end w-100 -->
</div> <!-- end d-flex -->
</div> <!-- end card-body -->
</div> <!-- end col -->

<div class="card mb-0 mt-2">
<div class="card-body">
<div class="d-flex align-items-start">
<img src="assets/images/users/avatar-2.jpg" alt="image" class="me-3 d-none d-sm-block avatar-sm rounded-circle">
<div class="w-100 overflow-hidden">
<h5 class="mb-1 mt-0">Dennis N. Cloutier</h5>
<p> Software Engineer </p>
<p class="mb-0 text-muted">
<span class="fst-italic"><b>"</b>Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.</span>
</p>
</div> <!-- end w-100 -->
</div> <!-- end d-flex -->
</div> <!-- end card-body -->
</div> <!-- end col -->

<div class="card mb-0 mt-2">
<div class="card-body">
<div class="d-flex align-items-start">
<img src="assets/images/users/avatar-3.jpg" alt="image" class="me-3 d-none d-sm-block avatar-sm rounded-circle">
<div class="w-100 overflow-hidden">
<h5 class="mb-1 mt-0">Susan J. Sander</h5>
<p> Web Designer </p>
<p class="mb-0 text-muted">
<span class="fst-italic"><b>"</b>Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.</span>
</p>
</div> <!-- end w-100 -->
</div> <!-- end d-flex -->
</div> <!-- end card-body -->
</div> <!-- end col -->

</div> <!-- end company-list-1-->
</div> <!-- end div.bg-light-->
</div> <!-- end col -->

<div class="col-md-6">
<div class="bg-dragula p-2 p-lg-4">
<h5 class="mt-0">Part 2</h5>
<div id="company-list-right" class="py-2">
<div class="card mb-0 mt-2">

<div class="card-body p-3">
<div class="d-flex align-items-start">
<img src="assets/images/users/avatar-4.jpg" alt="image" class="me-3 d-none d-sm-block avatar-sm rounded-circle">
<div class="w-100 overflow-hidden">
<h5 class="mb-1 mt-0">James M. Short</h5>
<p> Web Developer </p>
<p class="mb-0 text-muted">
<span class="fst-italic"><b>"</b>Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh </span>
</p>
</div> <!-- end w-100 -->
</div> <!-- end d-flex -->
</div> <!-- end card-body -->
</div> <!-- end col -->

<div class="card mb-0 mt-2">
<div class="card-body p-3">
<div class="d-flex align-items-start">
<img src="assets/images/users/avatar-5.jpg" alt="image" class="me-3 d-none d-sm-block avatar-sm rounded-circle">
<div class="w-100 overflow-hidden">
<h5 class="mb-1 mt-0">Gabriel J. Snyder</h5>
<p> Business Analyst </p>
<p class="mb-0 text-muted">
<span class="fst-italic"><b>"</b>Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh </span>
</p>
</div> <!-- end w-100 -->
</div> <!-- end d-flex -->
</div> <!-- end card-body -->
</div> <!-- end col -->

<div class="card mb-0 mt-2">
<div class="card-body p-3">
<div class="d-flex align-items-start">
<img src="assets/images/users/avatar-6.jpg" alt="image" class="me-3 d-none d-sm-block avatar-sm rounded-circle">
<div class="w-100 overflow-hidden">
<h5 class="mb-1 mt-0">Louie C. Mason</h5>
<p>Human Resources</p>
<p class="mb-0 text-muted">
<span class="fst-italic"><b>"</b>Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh </span>
</p>
</div> <!-- end w-100 -->
</div> <!-- end d-flex -->
</div> <!-- end card-body -->
</div> <!-- end col -->

</div> <!-- end company-list-2-->
</div> <!-- end div.bg-light-->
</div> <!-- end col -->

</div> <!-- end row -->

Move stuff between containers using handle

Just specify the data attribute data-plugin='dragula', data-containers='["first-container-id", "second-container-id"]' and data-handle-class='dragula-handle'.

Part 1
image
Louis K. Bond

Founder & CEO

image
Dennis N. Cloutier

Software Engineer

image
Susan J. Sander

Web Designer

Part 2
image
James M. Short

Web Developer

image
Gabriel J. Snyder

Business Analyst

image
Louie C. Mason

Human Resources

Make sure to include following js files at end of body element

                                                    <script src="assets/vendor/dragula/dragula.min.js"></script>
<script src="assets/js/ui/component.dragula.js"></script>
<div class="row" data-plugin="dragula" data-containers='["handle-dragula-left", "handle-dragula-right"]' data-handleClass="dragula-handle">
<div class="col-md-6">
<div class="bg-dragula p-2 p-lg-4">
<h5 class="mt-0">Part 1</h5>
<div id="handle-dragula-left" class="py-2">

<div class="card mb-0 mt-2">
<div class="card-body">
<div class="d-flex align-items-start">
<img src="assets/images/users/avatar-7.jpg" alt="image" class="me-3 d-none d-sm-block avatar-sm rounded-circle">
<div class="w-100 overflow-hidden">
<h5 class="mb-1 mt-1">Louis K. Bond</h5>
<p class="mb-0"> Founder & CEO </p>
</div> <!-- end w-100 -->
<span class="dragula-handle"></span>
</div> <!-- end d-flex -->
</div> <!-- end card-body -->
</div> <!-- end col -->

<div class="card mb-0 mt-2">
<div class="card-body">
<div class="d-flex align-items-start">
<img src="assets/images/users/avatar-8.jpg" alt="image" class="me-3 d-none d-sm-block avatar-sm rounded-circle">
<div class="w-100 overflow-hidden">
<h5 class="mb-1 mt-1">Dennis N. Cloutier</h5>
<p class="mb-0"> Software Engineer </p>
</div> <!-- end w-100 -->
<span class="dragula-handle"></span>
</div> <!-- end d-flex -->
</div> <!-- end card-body -->
</div> <!-- end col -->

<div class="card mb-0 mt-2">
<div class="card-body">
<div class="d-flex align-items-start">
<img src="assets/images/users/avatar-9.jpg" alt="image" class="me-3 d-none d-sm-block avatar-sm rounded-circle">
<div class="w-100 overflow-hidden">
<h5 class="mb-1 mt-1">Susan J. Sander</h5>
<p class="mb-0"> Web Designer </p>
</div> <!-- end w-100 -->
<span class="dragula-handle"></span>
</div> <!-- end d-flex -->
</div> <!-- end card-body -->
</div> <!-- end col -->

</div> <!-- end company-list-1-->
</div> <!-- end div.bg-light-->
</div> <!-- end col -->

<div class="col-md-6">
<div class="bg-dragula p-2 p-lg-4">
<h5 class="mt-0">Part 2</h5>
<div id="handle-dragula-right" class="py-2">
<div class="card mb-0 mt-2">

<div class="card-body p-3">
<div class="d-flex align-items-start">
<img src="assets/images/users/avatar-10.jpg" alt="image" class="me-3 d-none d-sm-block avatar-sm rounded-circle">
<div class="w-100 overflow-hidden">
<h5 class="mb-1 mt-1">James M. Short</h5>
<p class="mb-0"> Web Developer </p>
</div> <!-- end w-100 -->
<span class="dragula-handle"></span>
</div> <!-- end d-flex -->
</div> <!-- end card-body -->
</div> <!-- end col -->

<div class="card mb-0 mt-2">
<div class="card-body p-3">
<div class="d-flex align-items-start">
<img src="assets/images/users/avatar-5.jpg" alt="image" class="me-3 d-none d-sm-block avatar-sm rounded-circle">
<div class="w-100 overflow-hidden">
<h5 class="mb-1 mt-1">Gabriel J. Snyder</h5>
<p class="mb-0"> Business Analyst </p>
</div> <!-- end w-100 -->
<span class="dragula-handle"></span>
</div> <!-- end d-flex -->
</div> <!-- end card-body -->
</div> <!-- end col -->

<div class="card mb-0 mt-2">
<div class="card-body p-3">
<div class="d-flex align-items-start">
<img src="assets/images/users/avatar-3.jpg" alt="image" class="me-3 d-none d-sm-block avatar-sm rounded-circle">
<div class="w-100 overflow-hidden">
<h5 class="mb-1 mt-1">Louie C. Mason</h5>
<p class="mb-0">Human Resources</p>
</div> <!-- end w-100 -->
<span class="dragula-handle"></span>
</div> <!-- end d-flex -->
</div> <!-- end card-body -->
</div> <!-- end col -->

</div> <!-- end company-list-2-->
</div> <!-- end div.bg-light-->
</div> <!-- end col -->

</div> <!-- end row -->
Theme Settings
Choose Layout
Vertical
Horizontal
Color Scheme
Light
Dark
Layout Mode
Fluid
Boxed
Detached
Topbar Color
Light
Dark
Brand
Menu Color
Light
Dark
Brand
Layout Position