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

کشیدن و رها کردن بخشی از استاندارد HTML5 است.

کشیدن و رها کردن (drag and drop)
کشیدن و رها کردن یکی از ویژگی های بسیار معمول است. که در آن شما یک شی”گرفته” و آن را به مکان های مختلف می کشید.
در HTML5، کشیدن و انداختن (drag and drop) بخشی از استاندارد است، و هر عنصری را می تواند کشیده و رها شود.

پشتیبانی مرورگر

اینترنت اکسپلورر ۹، فایرفاکس، اپرا ۱۲، کروم، و سافاری ۵ از کشیدن و انداختن پشتیبانی می کنند.
توجه: کشیدن و انداختن (drag and drop) در Safari 5.1.2 کار نمی کند.
مثال کشیدن و انداختن
مثال زیر یک مثال ساده کشیدن و انداختن:

 

پیش نمایش آنلاین

این ممکن است به نظر پیچیده برسد ، اما اجازه دهید از طریق تمام بخش های مختلف از رویداد کشیدن و انداختن (drag and drop)ادامه دهیم.
قابل کشیدن(draggable) کردن یک عنصر
اول از همه: برای ایجاد یک عنصر “قابل کشیدن(draggable)”، ویژگی draggableرا بر روی “true” تنظیم کنید:

 

ondragstart و ()setData
سپس ، مشخص کنید هنگامی که عنصر کشیده می شود چه چیزی باید اتفاق بیافتد.
در مثال بالا، ویژگی ondragstart فراخوانی یک کارکرد است، کشیدن (واقعه)، که مشخص می کند چه داده ای کشیده شود.
متد dataTransfer.setData ()، نوع داده ها و مقدار داده های کشیده شده را تنظیم می کند:

 

در این مورد، نوع داده “Text” است و ارزش آن ID عنصر قابل کشیدن است “drag1”)).
ondragover
رویداد ondragover مشخص می کند که کجا داده های کشیده شده را می توان رها کرد.
به طور پیش فرض، داده ها/عناصر نمی توانند در عناصر دیگر رها شوند. به منظور اجازه برای یک رها کردن ، باید از مسئولیت پیش فرض عنصر جلوگیری کنیم.
این کار از طریق فراخوانی متدevent.preventDefault () برای رویداد ondragover انجام می شود:
event.preventDefault()
Drop – ondrop
هنگامی که یک داده کشیده شده رها می شود ، یک رویداد رها کردن رخ می دهد.
در مثال بالا، ویژگی ondrop کارکرد drop(event) را فراخوانی می کند :

 

توضیح کد:

preventDefault () را برای جلوگیری از دست زدن پیش فرض به داده ها توسط مرورگر فراخوانی کنید(کارکرد پیش فرض در رها کردن ، باز کردن به عنوان لینک است)
داده های کشیده شده با متدdataTransfer.getData(“Text”) را دریافت کنید. این روش هر گونه اطلاعات که در متد setData ()در نوع یکسان تنظیم شده است را باز خواهد گرداند
داده کشیده شده شناسه عنصر کشیده شده است(“drag1”)
اضافه عنصر کشیده شده را به عنصر رها کردن پیوست دهید.

کشیدن و رها کردن در HTML5
5 (100%) 1 رای

(434 نوشته)

C# Programmer , Web Design And Developer , MVC , ASP.NET

فکر شما چیست؟

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

حاصل جمع اعداد را وارد کنید : *