یادداشت‌ها

»

کشیدن و انداختن (رها کردن)

قبل از html5 برای ایجاد خاصیت کشیدن و رها کردن، لازم بود از طریق js وضعیت موس را رصد کنیم تا بتوانیم یک کشیدن و رهاکردن را شبیه‌سازی کنیم اما در html5 با درج خصیصه draggable=true یک المان به سادگی قابلیت Drag&Drop را پیدا می‌کند.
در مطلب Implementing Native Drag and Drop یک آموزش مفصل در این خصوص داده شده و انواع رویدادها و حالت‌های موردنیاز شرح داده شده و در این مطلب هم افکت‌های زیبایی برای بعد از شروع drag معرفی شده است.

پلاگین‌های زیر چند نمونه از پلاگین‌هایی هستند که کدنویسی عملیات «کشیدن و رها کردن» را برای شما تسهیل می‌کنند.

• gridSter
  کشیدن و رهاکردن مخصوص تعیین مکان باکس‌های مطالب یک صفحه
• HTML5 Sortable
  آقای علی فرهادی عزیز (که کار ایشان در ساخت تقویم جلالی جاوا اسکریپت، معروف و لازم‌التقدیر است) این اسکریپت 1 کیلوبایتی را ساخته‌اند که جایگزین خوبی برای jQuery ui با آن حجم سنگین‌ش می‌باشد. جالب اینجاست که با همه براوزرها (حتی IE5.5!!!!!) هم کار می‌کند.
  در صورتی که با انگولر جی‌اس کار می‌کنید، می‌توانید از این پلاگین که در واقع یک fork از کار آقای فرهادی است، استفاده کنید.
• Drag کردن لیست تو در تو (مناسب برای دسته‌بندی مطالب و ...)
  با کمک jQuery UI می‌توان خاصیت drag and drop را به یک لیست داد. همچنین در یک لیست تو در تو، باز هم می‌تواند آیتم‌های فرزند را با هم جابجا کرد و همچنین آیتم‌های والد را بالا و پایین کرد اما نمی‌توان یک آیتم فرزند را به صف والدها رساند و ...
  سه پلاگین زیر، بر اساس jQuery UI گسترش یافته‌اند و این نقیصه را مرتفع کرده‌اند:
  • nestedSortable jQuery Plugin Version 2.0 جزو بهترین پلاگین‌های این دسته است و بر روی وسائل لمسی (تاچ) هم بخوبی عمل می‌کند. همچنین این پلاگین دارای یک آبشن برای تم Right to Left (چپ به راست) است.
  • jquery ui nested sortables بد نیست اما نواقصی دارد و به خوبی بالایی نیست.
  • JQuery Nested Sortable خوب است اما جای بهتر شدن هم دارد :)
  • jQuery Sortable این پلاگین جدید نسبت به بقیه بهتر است و رابط کاربرپسندتری نیز دارد.
  • jqTree
    این پلاگین هم که داده‌های JSON را به منوی تو در تو تبدیل می‌کند، از قابلیت drag and drop پشتیبانی می‌کند.
• Infinite Drag (درگ بی‌پایان!)
  همانطور که از نامش هم پیداست، به شما امکان ایجاد درگ بدون محدودیت در همه جهات را می‌دهد و مصارف خاص خود را دارد. (مثل نقشه گوگل)
• Draggabilly
  این پلاگین یک پلاگین ساده برای دادن قابلیت درگ اند دراپ به یک div است و می‌توان محدوده درگ را نیز مشخص کرد. پشتیبانی از وسائل لمسی مانند تبلت از جمله ویژگی‌های این کد کوچک جاوا اسکریپت است.
• jQuery.Shapeshift نیز برنامه‌ای برای صفحاتی است که همه باکس‌های آن قرار است قابلیت کشیدن و رها کردن را داشته باشند...
• RubaXa Sortable
  این sortable کوچک دو کیلوبایتی مستقل از جی‌کوئری است و بر اساس API درگ کردن در html5 ساخته شده.
• kinetic
  با کمک این پلاگین کوچک می‌توانید کشیدن (drag) را جایگزین اسکرول کنید. هم اسکرول افقی و هم اسکرول عمودی.
• jOrgChart
  این پلاگین جی‌کوئری نیز برای مرتب‌سازی شاخه و زیرشاخه‌هاست با این تفاوت که امکان sort ندارد اما به صورت اتوماتیک، عناصر گرافیکی و ... را در صفحه جاسازی می‌کند. (پیش‌نمایش)

---

یادداشت‌های مرتبط

1. API چیست؟
2. گرافیک برداری
3. آبجکت در جاوا اسکریپت
4. برنامه های تحت وب آفلاین، چرا و چگونه؟
5. نمودارها در صفحات وب
6. نقشه Google در سایت شما
7. کنترل رویدادهای صفحه کلید، موس و صفحات لمسی
8. ابرکوکی و ذخیره ساز جدید HTML5
9. انیمیشن با CSS
10. روش های بهبود کیفیت آپلود فایل ها از طریق فرم های صفحات وب
11. کار با قابلیت Page Visibility و کاربردهای آن
12. اعتبارسنجی و شکل دهی فرم ها با استفاده از html5
13. ادیتورهای محتوای غنی شده برای صفحات وب
14. html نسخه 5
15. پخش کننده های فایل صوتی تصویری در صفحات وب
16. برنامه نویسی اندروید
17. کار با داده های سلسله مراتبی در پایگاه داده
18. کار با تصاویر در سمت کاربر
19. نمونه کارهایی با اچ تی ام ال پنچ