Dragula
Dragula یک افزونه جاوااسکریپت خالص است که div یا لیستی را که در آن کاربران می توانند گزینه ها را بین دو پنل انتخاب جابجا کنند، تبدیل می کند.
برای اطلاعات بیشتر لطفا به گیت هاب افزونه مراجعه کنید.
Dragula پایه با div
باید گزینه های div را بین این دو کانتینر جابجا کنیم.
می توانید این عناصر را بین این دو کانتینر جابجا کنید.
انتقال آن ها به جای دیگری کاملا امکان پذیر نیست.
هر چیزی را می توان جابجا کرد.
موارد استفاده تعاملی بیشتری در راه است.
همچنین امکان جابجایی عناصر در یک کانتینر و تغییر موقعیت آن ها وجود دارد.
این مورد استفاده پیش فرض است. شما فقط باید کانتینرهایی را که می خواهید استفاده کنید را مشخص کنید.
انتقال عناصر input به خوبی کار می کند. شما همچنین می توانید آن ها را نیز متمرکز کنید.
مثال کد
<div id="basicLeft" class="dragula-container card p-4 h-100">
<div class="p-3 bg-white border border-light round-lg">می توانید این عناصر را بین این دو کانتینر جابجا کنید.</div>
<div class="p-3 bg-white border border-light round-lg">انتقال آن ها به جای دیگری کاملا امکان پذیر نیست.</div>
<div class="p-3 bg-white border border-light round-lg">هر چیزی را می توان جابجا کرد.</div>
<div class="p-3 bg-white border border-light round-lg">موارد استفاده تعاملی بیشتری در راه است.</div>
</div>
<div id="basicRight" class="dragula-container card p-4 h-100">
<div class="p-3 bg-white border border-light round-lg">همچنین امکان جابجایی عناصر در یک کانتینر و تغییر موقعیت آن ها وجود دارد.</div>
<div class="p-3 bg-white border border-light round-lg">این مورد استفاده پیش فرض است. شما فقط باید کانتینرهایی را که می خواهید استفاده کنید را مشخص کنید.</div>
<div class="p-3 bg-white border border-light round-lg">انتقال عناصر <code>input</code> به خوبی کار می کند. شما همچنین می توانید آن ها را نیز متمرکز کنید.</div>
</div>
Dragula پایه با لیست
باید گزینه های list را بین این دو کانتینر جابجا کنیم.
- می توانید این عناصر را بین این دو کانتینر جابجا کنید.
- انتقال آن ها به جای دیگری کاملا امکان پذیر نیست.
- هر چیزی را می توان جابجا کرد.
- موارد استفاده تعاملی بیشتری در راه است.
- همچنین امکان جابجایی عناصر در یک کانتینر و تغییر موقعیت آن ها وجود دارد.
- این مورد استفاده پیش فرض است. شما فقط باید کانتینرهایی را که می خواهید استفاده کنید را مشخص کنید.
- انتقال عناصر input به خوبی کار می کند. شما همچنین می توانید آن ها را نیز متمرکز کنید.
مثال کد
<ul id="basicLeftList" class="dragula-container card p-4 h-100">
<li class="p-3 bg-white border border-light round-lg">می توانید این عناصر را بین این دو کانتینر جابجا کنید.</li>
<li class="p-3 bg-white border border-light round-lg">انتقال آن ها به جای دیگری کاملا امکان پذیر نیست.</li>
<li class="p-3 bg-white border border-light round-lg">هر چیزی را می توان جابجا کرد.</li>
<li class="p-3 bg-white border border-light round-lg">موارد استفاده تعاملی بیشتری در راه است.</li>
</ul>
<ul id="basicRightList" class="dragula-container card p-4 h-100">
<li class="p-3 bg-white border border-light round-lg">همچنین امکان جابجایی عناصر در یک کانتینر و تغییر موقعیت آن ها وجود دارد.</li>
<li class="p-3 bg-white border border-light round-lg">این مورد استفاده پیش فرض است. شما فقط باید کانتینرهایی را که می خواهید استفاده کنید را مشخص کنید.</li>
<li class="p-3 bg-white border border-light round-lg">انتقال عناصر <strong>ورودی</strong> به خوبی کار می کند. شما همچنین می توانید آن ها را نیز متمرکز کنید.</li>
</ul>
تم Dragula
گزینه ها را بکشید و بین این دو کانتینر حرکت دهید و گزینه جابجایی رنگ تم دریافت می کند.
به محض اینکه شروع به کشیدن یک عنصر می کنید، یک رویداد drag فعال می شود
رویداد shadow زمانی فعال می شود که نگهدارنده که نشان می دهد یک عنصر در کجا رها می شود به کانتینر یا موقعیت دیگری منتقل می شود.
رویداد زمانی فعال می شود که عنصری در جایی غیر از مبدا خود رها شود
رویداد cancel زمانی اجرا می شود که عنصری روی یک هدف نامعتبر رها شود، اما در عوض مکان اصلی خود را حفظ می کند.
وقتی چیزی را روی کانتینر می کشید، رویداد code فعال می شود
در نهایت یک dragend صرف نظر از اینکه به لغو، حذف یا رها کردن ختم شود
مثال کد
<div id="themeLeft" class="dragula-container card p-4 h-100">
<div class="p-3 bg-white border border-light round-lg">به محض اینکه شروع به کشیدن یک عنصر می کنید، یک رویداد <code>drag</code> فعال می شود</div>
<div class="p-3 bg-white border border-light round-lg">رویداد <code>shadow</code> زمانی فعال می شود که نگهدارنده که نشان می دهد یک عنصر در کجا رها می شود به کانتینر یا موقعیت دیگری منتقل می شود.</div>
<div class="p-3 bg-white border border-light round-lg">رویداد زمانی فعال می شود که عنصری در جایی غیر از مبدا خود رها شود</div>
</div>
<div id="themeRight" class="dragula-container card p-4 h-100">
<div class="p-3 bg-white border border-light round-lg">رویداد <code>cancel</code> زمانی اجرا می شود که عنصری روی یک هدف نامعتبر رها شود، اما در عوض مکان اصلی خود را حفظ می کند.</div>
<div class="p-3 bg-white border border-light round-lg">وقتی چیزی را روی کانتینر می کشید، رویداد <code>code</code> فعال می شود</div>
<div class="p-3 bg-white border border-light round-lg">در نهایت یک <code>dragend</code> صرف نظر از اینکه به لغو، حذف یا رها کردن ختم شود</div>
</div>
حذف نشت
اگر می خواهید گزینه را وقتی از کانتینر انتخابی بیرون می ریزد حذف کنید، می توانید به راحتی آیتم ها را در هر کانتینری فقط با کشیدن و رها کردن مرتب کنید.
انتقال آن ها به جای دیگری کاملا امکان پذیر نیست.
هر چیزی را می توان جابجا کرد. شما هنوز هم می توانید آن ها را جابجا کنید.
موارد استفاده تعاملی بیشتری در راه است.
رویداد زمانی فعال می شود که عنصری در جایی غیر از مبدا خود رها شود
این مورد استفاده پیش فرض است. شما فقط باید کانتینرهایی را که می خواهید استفاده کنید را مشخص کنید.
انتقال عناصر input به خوبی کار می کند. شما همچنین می توانید آن ها را نیز متمرکز کنید.
به محض اینکه شروع به کشیدن یک عنصر می کنید، یک رویداد drag فعال می شود
راننده تاکسی مضطرب
مثال کد
<div id="removeSpillLeft" class="dragula-container card p-4 h-100">
<div class="p-3 bg-white border border-light round-lg">انتقال آن ها به جای دیگری کاملا امکان پذیر نیست.</div>
<div class="p-3 bg-white border border-light round-lg">هر چیزی را می توان جابجا کرد. شما هنوز هم می توانید آن ها را جابجا کنید.</div>
<div class="p-3 bg-white border border-light round-lg">موارد استفاده تعاملی بیشتری در راه است.</div>
<div class="p-3 bg-white border border-light round-lg">رویداد زمانی فعال می شود که عنصری در جایی غیر از مبدا خود رها شود</div>
</div>
<div id="removeSpillRight" class="dragula-container card p-4 h-100">
<div class="p-3 bg-white border border-light round-lg">این مورد استفاده پیش فرض است. شما فقط باید کانتینرهایی را که می خواهید استفاده کنید را مشخص کنید.</div>
<div class="p-3 bg-white border border-light round-lg">انتقال عناصر <code>input</code> به خوبی کار می کند. شما همچنین می توانید آن ها را نیز متمرکز کنید.</div>
<div class="p-3 bg-white border border-light round-lg">به محض اینکه شروع به کشیدن یک عنصر می کنید، یک رویداد <code>drag</code> فعال می شود</div>
<div class="p-3 bg-white border border-light round-lg">راننده تاکسی مضطرب</div>
</div>
حذف نکردن نشت هر دو
به طور پیش فرض، رها کردن یک عنصر خارج از هر کانتینر شناخته شده، عنصر را حفظ می کند. هنگام انداختن به بیرون نمی توان آن را از کانتینر خارج کرد.
وقتی این اتفاق بیفتد، یک رویداد cancel مطرح خواهد شد
توجه داشته باشید که عنصر کشیده شده به مکانی که در ابتدا آن را از آنجا کشیدید برمی گردد، حتی اگر آن را روی کانتینرهای دیگر منتقل کنید.
جابجایی آیتم ها بین کانتینرها طبق معمول کار می کند
اگر می خواهید اطمینان حاصل کنید که رویدادهای رها کردن فقط زمانی اتفاق می افتند که کاربر قصد دارد به صراحت اتفاق بیفتد، این کار مفید است، و از غافلگیری اجتناب کنید
اگر بخواهید یک آیتم را خارج از هر کانتینری بیندازید، موقعیت اصلی خود را حفظ می کند
کمدین وحشتناک
مثال کد
<div id="not-removeSpillLeft" class="dragula-container card p-4 h-100">
<div class="p-3 bg-white border border-light round-lg">وقتی این اتفاق بیفتد، یک رویداد <code>cancel</code> مطرح خواهد شد</div>
<div class="p-3 bg-white border border-light round-lg">توجه داشته باشید که عنصر کشیده شده به مکانی که در ابتدا آن را از آنجا کشیدید برمی گردد، حتی اگر آن را روی کانتینرهای دیگر منتقل کنید.</div>
<div class="p-3 bg-white border border-light round-lg">جابجایی آیتم ها بین کانتینرها طبق معمول کار می کند</div>
</div>
<div id="not-removeSpillRight" class="dragula-container card p-4 h-100">
<div class="p-3 bg-white border border-light round-lg">اگر می خواهید اطمینان حاصل کنید که رویدادهای رها کردن فقط زمانی اتفاق می افتند که کاربر قصد دارد به صراحت اتفاق بیفتد، این کار مفید است، و از غافلگیری اجتناب کنید</div>
<div class="p-3 bg-white border border-light round-lg">اگر بخواهید یک آیتم را خارج از هر کانتینری بیندازید، موقعیت اصلی خود را حفظ می کند</div>
<div class="p-3 bg-white border border-light round-lg">کمدین وحشتناک</div>
</div>
کپی نشت هر دو
گزینه کپی از یک کانتینر به کانتینری دیگر، به طوری که می توان آن را از هر دو طرف بدون حذف کپی کرد.
شما یک کپی را می کشید، بنابراین وقتی آن ها در کانتینر دیگری انداخته می شوند، نسخه تکراری را می بینید.
کپی کردن از کشیدن عناصر اصلی جلوگیری می کند. یک کپی ایجاد می شود و به جای آن کشیده می شود
موارد استفاده تعاملی بیشتری در راه است
وقتی عناصر قابل کپی هستند، نمی توان آن ها را در کانتینر اصلی خود مرتب کرد
هر زمان که این اتفاق می افتد، یک رویداد cloned مطرح می شود
توجه داشته باشید که اگر همسان ها در کانتینر دیگری نیفتند از بین می روند
مثال کد
<div id="both-copySpillLeft" class="dragula-container card p-4 h-100">
<div class="p-3 bg-white border border-light round-lg">شما یک کپی را می کشید، بنابراین وقتی آن ها در کانتینر دیگری انداخته می شوند، نسخه تکراری را می بینید.</div>
<div class="p-3 bg-white border border-light round-lg">کپی کردن از کشیدن عناصر اصلی جلوگیری می کند. یک کپی ایجاد می شود و به جای آن کشیده می شود</div>
<div class="p-3 bg-white border border-light round-lg">موارد استفاده تعاملی بیشتری در راه است</div>
</div>
<div id="both-copySpillRight" class="dragula-container card p-4 h-100">
<div class="p-3 bg-white border border-light round-lg">وقتی عناصر قابل کپی هستند، نمی توان آن ها را در کانتینر اصلی خود مرتب کرد</div>
<div class="p-3 bg-white border border-light round-lg">هر زمان که این اتفاق می افتد، یک رویداد <code>cloned</code> مطرح می شود</div>
<div class="p-3 bg-white border border-light round-lg">توجه داشته باشید که اگر همسان ها در کانتینر دیگری نیفتند از بین می روند</div>
</div>
کپی نشت به کنار
گزینه کپی از کنار، به طوری که می توان آن را از یک طرف بدون حذف کپی کرد.
وقتی عناصر قابل کپی هستند، نمی توان آن ها را در کانتینر اصلی خود مرتب کرد
توجه داشته باشید که اگر همسان ها در کانتینر دیگری نیفتند از بین می روند
شما یک کپی را می کشید، بنابراین وقتی آن ها در کانتینر دیگری انداخته می شوند، نسخه تکراری را می بینید.
کپی کردن از کشیدن عناصر اصلی جلوگیری می کند.
مثال کد
<div id="aside-copySpillLeft" class="dragula-container card p-4">
<div class="p-3 bg-white border border-light round-lg">وقتی عناصر قابل کپی هستند، نمی توان آن ها را در کانتینر اصلی خود مرتب کرد</div>
<div class="p-3 bg-white border border-light round-lg">توجه داشته باشید که اگر همسان ها در کانتینر دیگری نیفتند از بین می روند</div>
<div class="p-3 bg-white border border-light round-lg">شما یک کپی را می کشید، بنابراین وقتی آن ها در کانتینر دیگری انداخته می شوند، نسخه تکراری را می بینید.</div>
<div class="p-3 bg-white border border-light round-lg">کپی کردن از کشیدن عناصر اصلی جلوگیری می کند. </div>
</div>
<div id="aside-copySpillRight" class="dragula-container card p-4 h-100"></div>
دستگیره کشیدن
با دستگیره ها گزینه کپی را از یک کانتینر به کانتینر دیگر بکشید.
توجه داشته باشید که عنصر کشیده شده به مکانی که در ابتدا آن را کشیدید باز می گردد
جابجایی آیتم ها بین کانتینرها طبق معمول کار می کند
هنگامی که این اتفاق می افتد، یک رویداد cancel مطرح می شود
اگر می خواهید مطمئن شوید که رویدادهای رها کردن فقط زمانی اتفاق می افتد که کاربر قصد داشته باشد، مفید است
کمدین وحشتناک
اگر سعی می کنید یک آیتم را خارج از هر کانتینری بیندازید
مثال کد
<div id="dragHandleLeft" class="dragula-container card p-4 h-100">
<div class="p-3 bg-white border border-light round-lg round-lg dragula-handle">
<span class="handle"></span>
<span>توجه داشته باشید که عنصر کشیده شده به مکانی که در ابتدا آن را کشیدید باز می گردد</span>
</div>
<div class="p-3 bg-white border border-light round-lg round-lg dragula-handle">
<span class="handle"></span>
<span>جابجایی آیتم ها بین کانتینرها طبق معمول کار می کند</span>
</div>
<div class="p-3 bg-white border border-light round-lg round-lg dragula-handle">
<span class="handle"></span>
<span>هنگامی که این اتفاق می افتد، یک رویداد <code>cancel</code> مطرح می شود</span>
</div>
</div>
<div id="dragHandleRight" class="dragula-container card p-4 h-100">
<div class="p-3 bg-white border border-light round-lg round-lg dragula-handle">
<span class="handle"></span>
<span>اگر می خواهید مطمئن شوید که رویدادهای رها کردن فقط زمانی اتفاق می افتد که کاربر قصد داشته باشد، مفید است</span>
</div>
<div class="p-3 bg-white border border-light round-lg round-lg dragula-handle">
<span class="handle"></span>
<span>کمدین وحشتناک</span>
</div>
<div class="p-3 bg-white border border-light round-lg round-lg dragula-handle">
<span class="handle"></span>
<span>اگر سعی می کنید یک آیتم را خارج از هر کانتینری بیندازید</span>
</div>
</div>
کانتینر کشیدن
یک گزینه را در بالا به پایین یک کانتینر به کانتینر دیگر بکشید. هیچ پیکربندی اضافی لازم نیست.
شما یک کپی را می کشید، بنابراین وقتی آن ها در کانتینر دیگری انداخته می شوند، نسخه تکراری را می بینید.
کپی کردن از کشیدن عناصر اصلی جلوگیری می کند. یک کپی ایجاد می شود و به جای آن کشیده می شود
موارد استفاده تعاملی بیشتری در راه است
وقتی عناصر قابل کپی هستند، نمی توان آن ها را در کانتینر اصلی خود مرتب کرد
هر زمان که این اتفاق می افتد، یک رویداد cloned مطرح می شود
مثال کد
<div id="dragContainer" class="dragula-container card p-4">
<div class="p-3 bg-white border border-light round-lg">شما یک کپی را می کشید، بنابراین وقتی آن ها در کانتینر دیگری انداخته می شوند، نسخه تکراری را می بینید.</div>
<div class="p-3 bg-white border border-light round-lg">کپی کردن از کشیدن عناصر اصلی جلوگیری می کند. یک کپی ایجاد می شود و به جای آن کشیده می شود</div>
<div class="p-3 bg-white border border-light round-lg">موارد استفاده تعاملی بیشتری در راه است</div>
<div class="p-3 bg-white border border-light round-lg">وقتی عناصر قابل کپی هستند، نمی توان آن ها را در کانتینر اصلی خود مرتب کرد</div>
<div class="p-3 bg-white border border-light round-lg">هر زمان که این اتفاق می افتد، یک رویداد <code>cloned</code> مطرح می شود</div>
</div>
