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

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

توسط

۱۳۹۷-۰۸-۰۷

این آموزش در تاریخ ۱۳۹۸/۰۱/۰۶ آپدیت شده است.

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

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

Free-Learn

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

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

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

رویداد ondragend زمانی رخ میدهد که عمل کشیدن و انداختن یا Drag and Drop به پایان رسیده باشد.

Free-Learn

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

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

<body>

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

<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<p id="demo" style="clear:both;"></p>

<script>
function dragStart(event) {
    event.dataTransfer.setData("Text", event.target.id);
    document.getElementById("demo").innerHTML = "شروع کشیدن عنصر";
}

function dragEnd(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));
}
</script>

</body>

<body>

</div>

function dragStart(event) {

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

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

}

function dragEnd(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));

}

</script>

</body>

امتحان کنید

Free-Learn

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

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

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

Free-Learn

روش استفاده

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

<element ondragend="script">

1	<element ondragend="script">

Free-Learn

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

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

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

Free-Learn

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

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

Free-Learn

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

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

Free-Learn

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