رویداد ondragover در HTML5 تگ html در drop ماوس

در این مقاله از سایت آموزی جهت استفاده شما عزیزان به معرفی رویداد ondragover در html5 میپردازیم.

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

رویداد ondragover در html5 یک رویداد عمومی تگ های html است.

معرفی ویژگی ondragover در زبان اچ تی ام ال

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

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

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

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

ondragstart
ondragend
ondrag
ondragenter
ondragover
ondragleave
ondrop

مثال در مورد استفاده از رویداد ondragover در html5 درون تگ 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>