لیست تو در تو
نمونه لیست ساده
آیتم 1
آیتم 2
آیتم 3
آیتم 4
آیتم 5
آیتم 6
<div id="example1" class="flex flex-col gap-3">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 4</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 5</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 6</div>
</div>
لیست های اشتراکی
آیتم 1
آیتم 2
آیتم 3
آیتم 4
آیتم 5
آیتم 6
آیتم 1
آیتم 2
آیتم 3
آیتم 4
آیتم 5
آیتم 6
<div class="grid md:grid-cols-2 gap-5">
<div id="example2-left" class="flex flex-col gap-3">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 4</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 5</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 6</div>
</div>
<div id="example2-right" class="flex flex-col gap-3">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">آیتم 1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">آیتم 2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">آیتم 3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">آیتم 4</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">آیتم 5</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">آیتم 6</div>
</div>
</div>
شبیه سازی
سعی کنید یک مورد را از یک لیست به لیست دیگر بکشید. موردی که کشیده میشود کلون میشود و کلون در لیست اصلی باقی میماند.
آیتم 1
آیتم 2
آیتم 3
آیتم 4
آیتم 5
آیتم 6
آیتم 1
آیتم 2
آیتم 3
آیتم 4
آیتم 5
آیتم 6
<div class="grid md:grid-cols-2 gap-5">
<div id="example3-left" class="flex flex-col gap-3">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 4</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 5</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 6</div>
</div>
<div id="example3-right" class="flex flex-col gap-3">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">آیتم 1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">آیتم 2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">آیتم 3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">آیتم 4</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">آیتم 5</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">آیتم 6</div>
</div>
</div>
غیرفعال کردن مرتب سازی
سعی کنید لیست در سمت چپ را مرتب کنید. این کار امکان پذیر نیست زیرا گزینه sort آن به صورت غیرفعال تنظیم شده است. با این حال، همچنان میتوانید از لیست در سمت چپ به لیست در سمت راست بکشید.
آیتم 1
آیتم 2
آیتم 3
آیتم 4
آیتم 5
آیتم 6
آیتم 1
آیتم 2
آیتم 3
آیتم 4
آیتم 5
آیتم 6
<div class="grid md:grid-cols-2 gap-5">
<div id="example4-left" class="flex flex-col gap-3">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 4</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 5</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 6</div>
</div>
<div id="example4-right" class="flex flex-col gap-3">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">آیتم 1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">آیتم 2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">آیتم 3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">آیتم 4</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">آیتم 5</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">آیتم 6</div>
</div>
</div>
مدیریت با آیکون
آیتم 1
آیتم 2
آیتم 3
آیتم 4
آیتم 5
آیتم 6
<div id="example5" class="flex flex-col gap-3">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700"><i class="mgc_move_line handle"></i> آیتم 1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700"><i class="mgc_move_line handle"></i> آیتم 2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700"><i class="mgc_move_line handle"></i> آیتم 3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700"><i class="mgc_move_line handle"></i> آیتم 4</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700"><i class="mgc_move_line handle"></i> آیتم 5</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700"><i class="mgc_move_line handle"></i> آیتم 6</div>
</div>
فیلتر کردن
سعی کنید آیتم با پس زمینه قرمز را بکشید. این امکان پذیر نیست، زیرا آن آیتم با استفاده از گزینه filter فیلتر شده است.
آیتم 1
آیتم 2
آیتم 3
فیلتر شده
آیتم 4
آیتم 5
<div id="example6" class="flex flex-col gap-3">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 3</div>
<div class="rounded-md border px-6 py-3 bg-danger filtered border-gray-200 dark:border-gray-700">Filtered</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 4</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 5</div>
</div>
نمونه شبک های
آیتم 1
آیتم 2
آیتم 3
آیتم 4
آیتم 5
آیتم 6
آیتم 7
آیتم 8
آیتم 9
آیتم 10
آیتم 11
آیتم 12
آیتم 13
آیتم 14
آیتم 15
آیتم 16
آیتم 17
آیتم 18
آیتم 19
آیتم 20
<div id="gridDemo" class="flex flex-wrap gap-4">
<div class="w-24 h-24 flex آیتمs-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">آیتم 1</div>
<div class="w-24 h-24 flex آیتمs-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">آیتم 2</div>
<div class="w-24 h-24 flex آیتمs-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">آیتم 3</div>
<div class="w-24 h-24 flex آیتمs-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">آیتم 4</div>
<div class="w-24 h-24 flex آیتمs-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">آیتم 5</div>
<div class="w-24 h-24 flex آیتمs-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">آیتم 6</div>
<div class="w-24 h-24 flex آیتمs-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">آیتم 7</div>
<div class="w-24 h-24 flex آیتمs-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">آیتم 8</div>
<div class="w-24 h-24 flex آیتمs-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">آیتم 9</div>
<div class="w-24 h-24 flex آیتمs-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">آیتم 10</div>
<div class="w-24 h-24 flex آیتمs-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">آیتم 11</div>
<div class="w-24 h-24 flex آیتمs-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">آیتم 12</div>
<div class="w-24 h-24 flex آیتمs-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">آیتم 13</div>
<div class="w-24 h-24 flex آیتمs-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">آیتم 14</div>
<div class="w-24 h-24 flex آیتمs-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">آیتم 15</div>
<div class="w-24 h-24 flex آیتمs-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">آیتم 16</div>
<div class="w-24 h-24 flex آیتمs-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">آیتم 17</div>
<div class="w-24 h-24 flex آیتمs-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">آیتم 18</div>
<div class="w-24 h-24 flex آیتمs-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">آیتم 19</div>
<div class="w-24 h-24 flex آیتمs-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">آیتم 20</div>
</div>
نمونه مرتبسازی تودرتو
توجه: هنگام استفاده از مرتبسازی تودرتو با انیمیشن، توصیه میشود که گزینه fallbackOnBody به true تنظیم شود.
همچنین همیشه توصیه میشود که یا گزینه invertSwap به true تنظیم شود، یا گزینه swapThreshold کمتر از مقدار پیشفرض 1 باشد (مثلاً 0.65).
آیتم 1.1
آیتم 2.1
آیتم 2.2
آیتم 3.1
آیتم 3.2
آیتم 3.3
آیتم 3.4
آیتم 2.3
آیتم 2.4
آیتم 1.2
آیتم 1.3
آیتم 1.4
آیتم 2.1
آیتم 2.2
آیتم 2.3
آیتم 2.4
آیتم 1.5
<div id="nestedDemo" class="flex flex-col gap-3 nested-sortable">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-1">آیتم 1.1
<div class="list-group nested-sortable">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-2">آیتم 2.1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-2">آیتم 2.2
<div class="list-group nested-sortable">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-3">آیتم 3.1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-3">آیتم 3.2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-3">آیتم 3.3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-3">آیتم 3.4</div>
</div>
</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-2">آیتم 2.3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-2">آیتم 2.4</div>
</div>
</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-1">آیتم 1.2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-1">آیتم 1.3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-1">آیتم 1.4
<div class="list-group nested-sortable">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-2">آیتم 2.1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-2">آیتم 2.2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-2">آیتم 2.3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-2">آیتم 2.4</div>
</div>
</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-1">آیتم 1.5</div>
</div>
کشیدن چند تایی
افزونه MultiDrag به شما امکان میدهد تا چندین آیتم را به طور همزمان بکشید. میتوانید برای "انتخاب" چندین آیتم کلیک کنید و سپس آنها را به صورت یک آیتم بکشید.
آیتم 1
آیتم 2
آیتم 3
آیتم 4
آیتم 5
آیتم 6
<div id="multiDragDemo" class="flex flex-col gap-3">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 4</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 5</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 6</div>
</div>
تعویض کردن
افزونه Swap رفتار Sortable را به گونهای تغییر میدهد که امکان جابجایی آیتمها با یکدیگر به جای مرتبسازی فراهم میکند.
آیتم 1
آیتم 2
آیتم 3
آیتم 4
آیتم 5
آیتم 6
<div id="swapDemo" class="flex flex-col gap-3">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 4</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 5</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">آیتم 6</div>
</div>