ویژگی عمومی ondragenter در زبان اچ تی ام ال
در این مقاله از سایت آموزی جهت استفاده شما عزیزان به معرفی رویداد ondragenter در html5 میپردازیم.
ویژگی رویدادی ondragenter زمانی رخ میدهد که یک تگ html در حال کشیده شدن وارد محدوده رها کردن یا drop به وسیله ماوس بشود.
خصوصیت ondragenter یک رویداد عمومی تگ های html است.
معرفی ویژگی عمومی ondragenter در زبان اچ تی ام ال
رویداد ondragenter در html5 زمانی رخ میدهد که یک تگ html در حال کشیده شدن وارد محدوده رها کردن یا drop به وسیله ماوس بشود.
خصوصیت دراگ و دراپ در HTML5 معرفی شده و توسط چند ویژگی و رویداد کنترل می شوذ.
که خاصیت رویدادی ondragenter و صفت draggable از جمله آنها می باشد. لینک ها و تصاویر برای کشیده شدن نیازی به صفت draggable ندارند.
ویژگی رویدادی ondragenter در دسته رویداد های ماوس قرار می گیرد. این رویداد هم جزء رویداد عمومی در تگ های html است.
ویژگی ها و رویدادهای دراگ و دراپ کردن تگ های html عبارتند از :
- ondragstart
- ondragend
- ondrag
- ondragenter
- ondragover
- ondragleave
- ondrop
مثال در مورد استفاده از رویداد ondragenter در html5 درون تگ div
<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>
بررسی ویژگی ondragenter درون سند html 4.0.1 و HTML5
خاصیت رویدادی ondragenter ، در نسخه HTML5 معرفی شده و HTML4.01 نسخه های قبلی وجود نداشته و پشتیبانی نمی شود.
برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور
برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 و jQuery
پشتیبانی مرورگرهای اینترنتی از ویژگی عمومی ondragenter در html5
رویداد html | |||||
ondragenter | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
پیوندهای کاربردی و مفید
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
رویداد ondragenter در HTML5 تگ drag شده به drop – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید