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