خانه آموزش HTML رویدادهای عمومی HTML آموزش رویداد عمومی OnDragEnter در HTML

آموزش رویداد عمومی OnDragEnter در HTML

توسط

۱۳۹۷-۰۸-۰۹

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش رویداد عمومی OnDragEnter در HTML با من همراه باشید.

آموزش رویداد عمومی OnDragEnter در HTML

Free-Learn

آنچه در این جلسه میخوانید :

1 رویداد عمومی OnDragEnter در HTML
2 مثال از رویداد عمومی OnDragEnter در HTML
3 پشتیبانی مرورگرها
4 روش استفاده
5 جدول مقادیر رویداد OnDragEnter
6 عناصری که توسط این رویداد پشتیبانی می شوند
7 نکات و توضیحات

رویداد عمومی OnDragEnter در HTML

رویداد ondragenter زمانی رخ میدهد که عنصر در حال کشیده شدن وارد محدوده (محدوده ای که قرار است در آن رها شود) شود.

رویداد OnDragEnter معمولا بهمراه رویداد OnDragLeave برای مشخص کردن , وارد شدن و خارج شدن عنصر در محدوده ی رها شدن مورد استفاده قرار میگیرد.

Free-Learn

مثال از رویداد عمومی OnDragEnter در HTML

در ادامه میتوانید یک مثال از این رویداد را مشاهده نمایید.

<body>

<div class="droptarget" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondragover="allowDrop(event)">
  <p ondragstart="dragStart(event)" draggable="true" id="dragtarget">منو با ماوس بگیر</p>
</div>

<div class="droptarget" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<p style="clear:both;" 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 blue";
        document.getElementById("demo").innerHTML = "وارد محدوده شد";
    }
}

function dragLeave(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "";
        document.getElementById("demo").innerHTML = "از محدوده خارج شد";
    }
}

function allowDrop(event) {
    event.preventDefault();
}

function drop(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
}
</script>

</body>

<body>

</div>

function dragStart(event) {

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

}

function dragEnter(event) {

if ( event.target.className == "droptarget" ) {

event.target.style.border = "3px dotted blue";

document.getElementById("demo").innerHTML = "وارد محدوده شد";

}

function dragLeave(event) {

if ( event.target.className == "droptarget" ) {

event.target.style.border = "";

document.getElementById("demo").innerHTML = "از محدوده خارج شد";

}

function allowDrop(event) {

event.preventDefault();

}

function drop(event) {

event.preventDefault();

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

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

}

</script>

</body>

امتحان کنید

Free-Learn

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

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از رویداد ondragenter در HTML پشتیبانی میکنند یا خیر.

نام مرورگر	Chrome	Firefox	Opera	Safari	IE
پشتیبانی	۴٫۰	۳٫۵	۱۲٫۰	۶٫۰	۹٫۰

Free-Learn

روش استفاده

روش استفاده از این رویداد در عناصر HTML بصورت زیر می باشد.

<element ondragenter="script">

1	<element ondragenter="script">

Free-Learn

جدول مقادیر رویداد OnDragEnter

در جدول زیر میتوانید مقادیری را که میتوان در این رویداد استفاده کرد را مشاهده نمایید.

مقدار	توضیح
script	دستورات جاوااسکریپت برای اجرا شدن

Free-Learn

عناصری که توسط این رویداد پشتیبانی می شوند

رویداد ondragenter را میتوان در تمامی عناصر/تگ های HTML بکار برد.

Free-Learn

نکات و توضیحات

رویداد ondragenter یک رویداد جدید/اضافه شده در HTML5‌ می باشد.

Free-Learn

دریافت PDF یا پرینت این مطلب