50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

تغییر ترتیب تصاویر گالری بوسیله drag&drop با PHP و AJAX

  • منتشر شده در تاریخ

تغییر ترتیب تصاویر گالری بوسیله drag&drop با PHP و AJAX

در این آموزش قصد داریم به شما نحوه تغییر ترتیب تصاویر گالری بوسیله drag&drop با PHP و AJAX به همراه سورس کد کامل در اختیار شما قرار بدیم.

Drag and drop (کشیدن و رها کردن) یک قابلیت راحت UI برا کاربران است زمانی که بخواهند المان ها صفحه را مدیریت کنند.

بخصوص, زمانی که تصاویر را در یک گالری نمایش می دهیم و به کاربران اجازه حرکت دادن آن ها را می دهیم. پس قابلیت drag&drop بهترین گزینه است.

پلاگین های زیادی نمایش گالری تصاویر با قابلیت مرتب سازی مجدد وجود دارند.

در این مثال, قصد داریم به شما نحوه پیاده سازی تغییر ترتیب تصاویر گالری را با کدهای سفارشی php و جی کویری بوسیله کتابخانه jQuery UI نشان بدیم.

 

تصاویر گالری بصورت داینامیک از طریق دیتابیس خوانده می شود. برای هر تصویر کارت-مانند قابلیت draggable بودن برای تغییر ترتیب آن ست می شود.

همنیکه مرتب سازی دوباره تکمیل شد, ترتیب آن با کلیک روی دکمه save در دیتابیس بروزرسانی می شود.

 

کد نمایش گالری تصویر

این کد شامل HTML برای نمایش گالری به کاربر استفاده شده است. این تصاویر از دیتابیس واکشی (fetch) و در گالری نمایش داده شده اند.

کد PHP برای واکشی نتایج دیتابیس و تکرار آرایه نتایج تصاویر برای ایجاد کد HTML برای نمایش عکس استفاده شده است.

مرتب سازی دوباره با drag-drop جی کویری

اسکریپت زیر به شما نحوه فعال کردن ویژگی drag&drop (کشیدن و رها کردن) برای تغییر موقعیت تصاویر در UI گالری را نشان می دهد.

با فراخوانی متد sortable() در jQuery UI می توانیم قابلیت مرتب شدن ره با المان های تصاویر اضافه کنیم.

هنگام مرتب سازی, ایندکس رها کردن (drop) تصویر در یک متغییر ذخیره می شود. از این مقدار بعدا برای استفاده در شرط به منظور بهینه سازی روند ایجاد و افزودن id تصویر به آرایه بهره می بریم.

برای مثال, اگر مرتب سازی بین سه تصویر اول انجام شود, به جای اینکه کل سطرهای تصاویر در دیتابیس بروزرسانی شود, تنها این رکوردها آپدیت می شود

بعد از تغییر ترتیب تصویر, رویداد کلیک روی دکمه Save یک درخواست AJAX را ارسال می کند. در این درخواست, کد PHP به منظور آپدیت ترتیب تصاویر  در دیتابیس فراخوانی می شود.

کد PHP برای ذخیره ترتیب تصاویر در دیتابیس

این کد PHP برای ذخیره و بروزرسانی(Update) ترتیب تصویر در دیتابیس استفاده شده است. این فایل PHP توسط درخواست AJAX با ارسال آی دی (id) تصویری که قرار است مرتب شود, فراخوانی می شود.

آرایه مربوط به آی دی تصاویر در این فایل دریافت و در یک حلقه تکرار برای بروزرسانی دیتابیس استفاده می شود.

اسکریپت دیتابیس

آدرس تصاویر داخل جدول tbl_images ذخیره می شود. فایل SQL زیر به شما دستورات لازم برای ساخت جدول و داده های dump شده را نشان می دهد.

برای اجرای اسکریپت تغییر ترتیب تصاویر گالری بوسیله drag&drop با PHP و AJAX

کافیست که کد زیر را در فایل.sqlذخیره و در دیتابیس مورد نظر import کنید.

خروجی تغییر ترتیب تصاویر گالری بوسیله drag&drop با PHP و AJAX

تصاویر گالری در اسکرین شات زیر قابل مشاهده است. در این اسکرین شات یک پیام موفقیت آمیز برای اطلاع کاربر از اینکه ترتیب تصاویر در دیتابیس تغییر داده شده است, قابل نمایش است.

تغییر ترتیب تصاویر گالری بوسیله drag&drop با PHP و AJAX

امیدوارم از آموزش تغییر ترتیب تصاویر گالری بوسیله drag&drop با PHP و AJAX نهایت استفاده را برده باشید.

برای دانلود سورس کد کامل از باکس دانلود زیر استفاده کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    دوره های آموزشی

    دانلود رایگان کتاب آموزش PHP

    صفر تا صد PHP و MySQL را یکجا یاد بگیرید
    همین الان دانلود کن
    نگران نباشید. ایمیل‌های مزاحم نمی‌فرستیم
    close-link