رویداد ondrop در HTML5 | رویداد عمومی ondrop در HTML

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

رویداد ondrop در HTML5 | رویداد عمومی ondrop در HTML

رویداد ondrop در HTML5 | رویداد عمومی ondrop در HTML | رویداد ondrop در HTML5 | رویداد عمومی ondrop در HTML | رویداد ondrop در HTML5 | رویداد عمومی ondrop در HTML | رویداد ondrop در HTML5 | رویداد عمومی ondrop در HTML | رویداد ondrop در HTML5 | رویداد عمومی ondrop در HTML | رویداد ondrop در HTML5 | رویداد عمومی ondrop در HTML | رویداد ondrop در HTML5 | رویداد عمومی ondrop در HTML | رویداد ondrop در HTML5 | رویداد عمومی ondrop در HTML | رویداد ondrop در HTML5 | رویداد عمومی ondrop در HTML

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

صفت رویدادی ondrop زمانی رخ میدهد که یک تگ html که توسط کاربر در وضعیت drag یا کشیده شدن قرار داشته به وضعیت رها شدن یا drop به وسیله ماوس کاربر وارد شود.

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

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

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

ویژگی رویدادی ondrop در دسته رویداد های مربوط به ماوس قرار می گیرد.

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

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

  1. ondragstart
  2. ondragend
  3. ondrag
  4. ondragenter 
  5. ondragover
  6. ondragleave
  7. ondrop

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

[html]<div class=”droptarget” ondrop=”drop(event)” ondragover=”allowDrop(event)”>
<p ondragstart=”dragStart(event)” draggable=”true” id=”dragtarget”>Drag me!</p>
</div>
<div class=”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);
document.getElementById(“demo”).innerHTML = “Started to drag the p element”;
}
function allowDrop(event) {
event.preventDefault();
}
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>[html] بررسی ویژگی ondrop درون سند html 4.0.1 و HTML5

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

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

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

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

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

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

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

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

تگ های HTML در W3school

رویداد ondrop در HTML5 | رویداد عمومی ondrop در HTML – اختصاصی سایت آموزی

Post Views: ۱۴۶