دراگولا
مثال کشیدن و رها کردن ساده
فقط ویژگی داده را مشخص کنیدdata-plugin='dragula' to have drag and drop support in your container.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
مطمئن شوید که فایل‌های js زیر را در پایان قرار دهیدbody element
\u003cscript src\u003d\
\u003cdiv class\u003d\
وسایل را بین ظروف جابجا کنید
فقط ویژگی داده را مشخص کنیدdata-plugin='dragula' and
data-containers='["first-container-id", "second-container-id"]'.
قسمت 1
لوئیس کی باند
موسس و مدیرعامل
enDisrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.
دنیس ان. کلوتیر
مهندس نرم افزار
enDisrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.
سوزان جی. ساندر
طراح وب
enDisrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.
قسمت 2
جیمز ام. کوتاه
توسعه دهنده وب
enDisrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh
گابریل جی اسنایدر
تحلیلگر کسب و کار
enDisrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh
لویی سی میسون
منابع انسانی
enDisrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh
مطمئن شوید که فایل‌های js زیر را در پایان قرار دهیدbody element
\u003cscript src\u003d\
<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 -->
وسایل را با استفاده از دسته بین ظروف جابجا کنید
فقط ویژگی داده را مشخص کنیدdata-plugin='dragula',
data-containers='["first-container-id", "second-container-id"]' and
data-handle-class='dragula-handle'.
قسمت 1
لوئیس کی باند
موسس و مدیرعامل
دنیس ان. کلوتیر
مهندس نرم افزار
سوزان جی. ساندر
طراح وب
قسمت 2
جیمز ام. کوتاه
توسعه دهنده وب
گابریل جی اسنایدر
تحلیلگر کسب و کار
لویی سی میسون
منابع انسانی
مطمئن شوید که فایل‌های js زیر را در پایان قرار دهیدbody element
\u003cscript src\u003d\
\u003cdiv class\u003d\