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

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

توسط

۱۳۹۷-۰۸-۰۶

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

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

Free-Learn

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

رویداد ondrag زمانی رخ میدهد که یک عنصر دِرَگ شود, یا خودمونی وقتی عنصری با ماوس گرفته شود و بخواهد به مکانی دیگر برده و انداخته شود.

کشیدن و انداختن یا به انگلیسی Drag and Drop یعنی اینکه ما یک عنصر را با ماوس گرفته و به مکانی دیگر برده و در نهایت آن را رها نماییم. این رویداد در HTML5 اضافه شده است.

Free-Learn

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

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

<body>

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

<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<p style="clear:both;" id="demo"></p>

<script>
function dragStart(event) {
    event.dataTransfer.setData("Text", event.target.id);
}

function dragging(event) {
    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));
    document.getElementById("demo").innerHTML = "عنصر کشید و انداخته شد";
}
</script>

</body>

<body>

منو با ماوس بگیر

</p>

</div>

<br>

function dragStart(event) {

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

}

function dragging(event) {

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));

document.getElementById("demo").innerHTML = "عنصر کشید و انداخته شد";

}

</script>

</body>

امتحان کنید

Free-Learn

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

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

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

Free-Learn

روش استفاده

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

<element ondrag="script">

1	<element ondrag="script">

Free-Learn

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

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

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

Free-Learn

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

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

Free-Learn

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

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