رویداد ondragleave در HTML5 خروج تگ html از drop

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

رویداد ondragleave در HTML5 خروج تگ html از drop - سایت آموزی

معرفی صفت رویدادی ondragleave در سند اچ تی ام ال

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

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

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

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

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

با استفاده از رویدادهای OnDragEnter و OnDragLeave میتوان وارد شدن و خارج شدن یک تگ html را از یک محدوده Drop یا رها کردن را مشخص کرد.

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

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

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

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

[html]<div class=”droptarget” ondrop=”drop(event)” ondragenter=”dragEnter(event)” ondragleave=”dragLeave(event)” ondragover=”allowDrop(event)”>
<p ondragstart=”dragStart(event)” draggable=”true” id=”dragtarget”>Drag me!</p>
</div>
<div class=”droptarget” ondragenter=”dragEnter(event)” ondragleave=”dragLeave(event)” 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 dragEnter(event) {
if ( event.target.className == “droptarget” ) {
event.target.style.border = “3px dotted red”;
document.getElementById(“demo”).innerHTML = “Entered the dropzone”;
}
}
function dragLeave(event) {
if ( event.target.className == “droptarget” ) {
event.target.style.border = “”;
document.getElementById(“demo”).innerHTML = “Left the dropzone”;
}
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData(“Text”);
event.target.appendChild(document.getElementById(data));
}
</script>[/html]

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

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

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

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

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

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

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

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

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

تگ های HTML در W3school

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

ویژگی های CSS در W3schools

رویداد ondragleave در HTML5 خروج تگ html از drop – اختصاصی سایت آموزی