دراگ پر ہونے کا ایوینٹ
تعریف و استفاده
وقتی عنصر قابل کشیدن یا انتخاب متن به عنوان هدف قرار میگیرد، رویداد ondragover رخ میدهد.
به طور پیشفرض، نمیتوان دادهها یا عناصر را در عناصر دیگر حذف کرد. برای اجازه دادن به قرار دادن، باید عملکرد پیشفرض عنصر را جلوگیری کنید. این کار از طریق فراخوانی روش event.preventDefault() در رویداد ondragover انجام میشود.
کشیدن و قرار دادن یکی از امکانات رایج HTML5 است. این امکان به شما اجازه میدهد که یک شیء را "گرفته" و به مکان دیگری بکشید. برای یادگیری بیشتر، لطفاً بخشهای مربوط به HTML5 دراگ ایندتوضیحات.
توضیحات:برای اینکه عنصر قابل کشیدن باشد، لطفاً از منوی آموزشی HTML استفاده کنید ویژگی draggable HTML5。
توضیحات:به طور پیشفرض، لینکها و تصاویر قابل کشیدن هستند و نیازی به ویژگی draggable نیستند.
در مراحل مختلف عمل کشیدن و قرار دادن، بسیاری از رویدادها استفاده میشوند و ممکن است رخ دهند:
رویدادهایی که روی عنصر قابل کشیدن (عنصر منبع) رخ میدهند:
- ondragstart - وقتی کاربر عمل کشیدن عنصر را شروع میکند رخ میدهد
- ondrag - وقتی عنصر در حال کشیدن است رخ میدهد
- ondragend - وقتی کاربر عمل کشیدن عنصر را به پایان میرساند رخ میدهد
رویدادهایی که روی هدف رخ میدهند:
- ondragenter - وقتی عنصر به داخل هدف وارد میشود رخ میدهد
- ondragover - وقتی عنصر روی هدف قرار دارد رخ میدهد
- ondragleave - وقتی عنصر از هدف خارج میشود رخ میدهد
- ondrop - وقتی عنصر به عنوان هدف قرار میگیرد رخ میدهد
توضیحات:وقتی عنصر در حال کشیدن است، رویداد ondragover هر 350 میلیثانیه یک بار فعال میشود.
مثال
اجرای جاوااسکریپت زمانی که عنصر به عنوان هدف قرار میگیرد:
<div ondragover="myFunction(event)"></div>
پایین صفحه مثالهای بیشتری از TIY وجود دارد.
نحوهی نوشتن
در HTML:
<عنصر ondragover="myScript">
در جاوااسکریپت:
اجسام.ondragover = function(){myScript};
در جاوااسکریپت از روش addEventListener() استفاده کنید:
اجسام.addEventListener("dragover", myScript);
توضیحات:این نسخه از Internet Explorer 8 یا قدیمیتر پشتیبانی نمیکند addEventListener() 方法。
技术细节
冒泡: | 支持 |
---|---|
可取消: | 支持 |
事件类型: | دراگ ایوینٹ |
支持的 HTML 标签: | 所有 HTML 元素 |
DOM 版本: | Level 3 Events |
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
事件 | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
ondragover | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
更多实例
对所有可能的拖放事件的演示:
Drag me!
Drop here!