مشاهده تصویر بزرگتر

رویداد ondragover در HTML5

رویداد ondragover در HTML5 رویداد عمومی ondragover

در این مقاله از سایت آموزی جهت استفاده شما عزیزان به معرفی صفت رویدادی ondragover در سند html می پردازیم. ویژگی رویدادی ondragover زمانی رخ میدهد که یک تگ html به روی محدوده ای که قرار است در آن drop یا رها شود، به وسیله ماوس قرار گیرد. خصوصیت ondragover یک رویداد عمومی تگ های html است.

رویداد ondragover در HTML5 رویداد عمومی ondragover | رویداد ondragover در HTML5 رویداد عمومی ondragover | رویداد ondragover در HTML5 رویداد عمومی ondragover | رویداد ondragover در HTML5 رویداد عمومی ondragover | رویداد ondragover در HTML5 رویداد عمومی ondragover | رویداد ondragover در HTML5 رویداد عمومی ondragover | رویداد ondragover در HTML5 رویداد عمومی ondragover | رویداد ondragover در HTML5 رویداد عمومی ondragover

معرفی صفت رویدادی ondragover در سند HTML

صفت رویدادی ondragover زمانی رخ میدهد که یک تگ html به روی محدوده ای که قرار است در آن drop یا رها شود، به وسیله ماوس قرار گیرد.

خصوصیت دراگ و دراپ در HTML5 معرفی شده و توسط چند ویژگی و رویداد کنترل می شوذ.

که خاصیت رویدادی ondragover و صفت draggable از جمله آنها می باشد.

لینک ها و تصاویر برای کشیده شدن نیازی به صفت draggable ندارند.

ویژگی رویدادی ondragover در دسته رویداد های ماوس قرار می گیرد.

این رویداد هم جزء رویداد عمومی در تگ های html است.

ویژگی ها و رویدادهای دراگ و دراپ کردن تگ های html عبارتند از :

ondragstart
ondragend
ondrag
ondragenter
ondragover
ondragleave
ondrop

مثال در مورد استفاده از ویژگی ondragover درون تگ div

<div id="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<p style="clear:both;"><strong>Note:</strong> drag events are not supported in Internet Explorer 8 and earlier versions or Safari 5.1 and earlier versions.</p>
<p id="demo"></p>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function allowDrop(event) {
event.preventDefault();
document.getElementById("demo").innerHTML = "The p element is OVER the droptarget.";
event.target.style.border = "4px dotted green";
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("demo").innerHTML = "The p element was dropped.";
}
</script>

</div>

<p style="clear:both;"><strong>Note:</strong> drag events are not supported in Internet Explorer 8 and earlier versions or Safari 5.1 and earlier versions.</p>

function dragStart(event) {

event.dataTransfer.setData("Text", event.target.id);

}

function allowDrop(event) {

event.preventDefault();

document.getElementById("demo").innerHTML = "The p element is OVER the droptarget.";

event.target.style.border = "4px dotted green";

}

function drop(event) {

event.preventDefault();

var data = event.dataTransfer.getData("Text");

event.target.appendChild(document.getElementById(data));

document.getElementById("demo").innerHTML = "The p element was dropped.";

}

</script>

بررسی ویژگی ondragover درون سند html 4.0.1 و HTML5

خاصیت رویدادی ondragovere ، در نسخه HTML5 معرفی شده و HTML4.01 نسخه های قبلی وجود نداشته و پشتیبانی نمی شود.

پشتیبانی مرورگرهای اینترنتی از ویژگی ondragover

[s1upsystic-tables id=121]

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

رویداد ondragover در HTML5 رویداد عمومی ondragover – اختصاصی سایت آموزی

Post Views: ۲۶۲

توسط سایت آموزی|آذر ۲۸ام, ۱۳۹۷|html دسته بندی ها|برچسب ها: آموزش تگ html, آموزش کاربردی html, آموزش کاربردی طراحی سایت, آموزش های html, اچ تی ام ال, رویداد عمومی HTML, زبان html, طراحی سایت کاربردی|بدون دیدگاه

در باره نویسنده : سایت آموزی

علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب