مثال
در اینجا مثالی از ویژگی Multiple Container Sortable کتابخانه Draggable است. ما همچنین صفحه Kanban را با استفاده از این کتابخانه قابل کشیدن طراحی می کنیم. می توانید هر کارتی را بین دو ستون زیر بکشید:
یک اعلان کوکی اضافه کنید که در پایین صفحه نشان داده می شود و پیوندی با "خط مشی رازداری" دارد.
یک فایل pdf اضافه کنید که تمام علائم COVID-19 را توضیح دهد
یک فرم ثبت نام ایجاد کنید که شامل نام، ایمیل و یک قسمت ورودی رمز عبور باشد
طرحبندی صفحه نمایه را با تصویر جلد و منوی تنظیمات کاربر بهروزرسانی کنید
تمام بسته های npm را به روز کنید و افزونه های قدیمی را نیز حذف کنید
یک صفحه شروع اضافه کنید که به کاربران امکان می دهد روند شروع را ببینند
تمام کارها را بررسی و آزمایش کنید و در سرور مستقر کنید
تمام داده ها را با تماس API دریافت کنید و با افزودن یک بخش جدید آنها را به صفحه فرود نشان دهید
<div class="row">
<div class="col-lg-6">
<div class="kanban-items-container border bg-white dark__bg-1000 rounded-2 py-3 mb-3" style="max-height: none;">
<div class="card mb-3 kanban-item shadow-sm dark__bg-1100">
<div class="card-body">
<p class="fs--1 fw-medium font-sans-serif mb-0">Add a cookie notice which will be shown in the bottom of the page and have a link of "Privacy Policy"</p>
</div>
</div>
<div class="card mb-3 kanban-item shadow-sm dark__bg-1100">
<div class="card-body">
<p class="fs--1 fw-medium font-sans-serif mb-0">Add a pdf file that describes all the symptoms of COVID-19</p>
</div>
</div>
<div class="card mb-3 kanban-item shadow-sm dark__bg-1100">
<div class="card-body">
<p class="fs--1 fw-medium font-sans-serif mb-0">Make a Registration form that include Name, Email and a Password input field</p>
</div>
</div>
<div class="card mb-3 kanban-item shadow-sm dark__bg-1100">
<div class="card-body">
<p class="fs--1 fw-medium font-sans-serif mb-0">Update profile page layout with cover image and user setting menu</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="kanban-items-container border bg-white dark__bg-1000 rounded-2 py-3 mb-3" style="max-height: none;">
<div class="card mb-3 kanban-item shadow-sm dark__bg-1100">
<div class="card-body">
<p class="fs--1 fw-medium font-sans-serif mb-0">Update all the npm packages and also remove the outdated plugins</p>
</div>
</div>
<div class="card mb-3 kanban-item shadow-sm dark__bg-1100">
<div class="card-body">
<p class="fs--1 fw-medium font-sans-serif mb-0">Add a getting started page that allows users to see the starting process</p>
</div>
</div>
<div class="card mb-3 kanban-item shadow-sm dark__bg-1100">
<div class="card-body">
<p class="fs--1 fw-medium font-sans-serif mb-0">Review and test all the task and deploy to the server</p>
</div>
</div>
<div class="card mb-3 kanban-item shadow-sm dark__bg-1100">
<div class="card-body">
<p class="fs--1 fw-medium font-sans-serif mb-0">Get all the data by API call and show them to the landing page by adding a new section</p>
</div>
</div>
</div>
</div>
</div>
جاوا اسکریپت
<script src="vendors/draggable/draggable.bundle.legacy.js"></script>