اگر علاقه مند به همکاری در نت پارادیس جهت نویسندگی، ویراستاری و ترجمه مطالب هستی پس روی دکمه مقابل کلیک کن

علاقه به همکاری دارم

طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

کشیدن و رها کردن در html5


آموزش HTML - مقدمه

در جلسه قبلی آموزش HTML با موقعیت جغرافیایی (geolocation) در html5 آشنا شدیم. در این بخش به کشیدن و رها کردن در html5 خواهیم پرداخت.

قابلیت کشیدن و رها کردن در html5 (drag & drop)، بصورت ذاتی پشتیبانی می شود.

المان Drag & Drop

ویژگی drag & drop به کاربر امکان کشیدن و انداختن یک عنصر به مکان دیگر را، میدهد. مکانِ رها کردن (drop) ممکن است نرم افزار کاربردیِ متفاوتی باشد. با کشیدن (dragging) یک عنصر ، نمایشی کدر و غیر شفاف از عنصر، اشاره گر ماوس را دنبال می کند.

نکته: می توانید یک عنصر را با تنظیم خصوصیت draggble آن با true، قابل drag کردن کنید، مثل draggable="true". با این حال، در بیشتر مرورگرها، انتخاب های متنی، عکس ها، و لنگرگاه های عناصرِ دارای خصوصیت href ، بصورت پیش فرض قابل درگ کردن هستند.

حتما بخوانید  آموزش HTML - موقعیت جغرافیایی html5

رویداد Drag and Drop

در مراحل مختلفِ عمل کشیدن و رها کردن، تعدادی رویداد اجرا می شوند. ولی رویداد های ماوس مثل mousemove، در زمان انجام عمل کشیدن، اجرا نمیشوند.

جدول زیر مرور کوتاهی است بر تمام رویداد های کشیدن و رها کردن:

رویداد (Event) توضیحات
ondragstart زمانی که کاربر شروع به کشیدن (Dragging) عنصر کند، اجرا میشود
ondragenter زمانی که یک عنصر قابل کشیدن، ابتدا به یک drop listener جابه جا شود، اجرا میشود
ondragover زمانی که کاربر یک عنصر را روی یک drop listener می کشد، اجرا میشود
ondreagleave زمانی که کاربر یک عنصر را به بیرون از یک drop listener می کشد، اجرا میشود.
ondrag زمانی که کاربر عنصری را به هر جایی بکشد، اجرا می شود؛ بصورت مدام اجرا میشود ولی می تواند مختصات X و Y اشاره گر ماوس را بدهد.
ondrop زمانی که یک عنصر را بصورت موفقیت آمیز در یک drop listener رها می کند، اجرا میشود.
ondragend زمانی که عمل کشیدن تمام شود، چه موفقیت آمیز باشد، چه نباشد، اجرا میشود. این رویداد زمان کشیدنِ یک فایل از صفحه ی دسکتاپ به مرورگر، اجرا نمیشود.

نکته: تمام مرورگرهای مطرح و مدرن مثال Firefox، Chrome، Opera، Safari و Internet Explorer 9+ از ویژگیِ  drag and dropدر HTML5 پشتیبانی می کنند.

 

امیدوارم در این بخش آموزش HTML , از کشیدن و رها کردن در html5 نهایت استفاده را برده باشید.

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

موفق باشید.

حتما بخوانید  آموزش HTML - پخش ویدئو در HTML
اگر مفید بود, لطفا به اشترک بگذارید تا دوستان دیگر نیز بهره ببرند

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

دیدگاه کاربران

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

جدیدترین آموزش های آنلاین



دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

سورس فروشگاهی دیجی کالا

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما

logo-samandehi

دانلود کتاب

عضویت رایگان خبرنامه