ondragend ایوینٹ

DOM ایوینٹ DragEvent

تعریف و استفاده

رویداد ondragend رخ می‌دهد وقتی که کاربر عمل کشیدن عنصر یا انتخاب متن را تکمیل می‌کند.

کشیدن و رها کردن یکی از ویژگی‌های بسیار رایج HTML5 است. این به معنای "گرفتن" یک شیء و کشیدن آن به مکان دیگری است. برای یادگیری بیشتر، لطفاً از ما در مورد HTML5 کا ڈراگ اینڈ ڈرپتوضیح HTML استفاده کنید.

توضیح:برای اینکه عنصر قابل کشیدن باشد، از global ویژگی draggable HTML5。

توضیح:به طور پیش‌فرض، لینک‌ها و تصاویر قابل کشیدن هستند و نیازی به ویژگی draggable نیست.

در مراحل مختلف عمل کشیدن و رها کردن، بسیاری از رویدادها استفاده می‌شوند و ممکن است رخ دهند:

رویدادهایی که روی عنصر قابل کشیدن (عنصر منبع) رخ می‌دهند:

  • ondragstart - وقتی که کاربر عمل کشیدن عنصر را شروع می‌کند، رخ می‌دهد
  • ondrag - وقتی که عنصر کشیده می‌شود، رخ می‌دهد
  • ondragend - وقتی که کاربر عمل کشیدن عنصر را تکمیل می‌کند، رخ می‌دهد

رویدادهایی که روی هدف قرار می‌گیرند:

  • ondragenter - وقتی که عنصر کشیده شده به داخل هدف وارد می‌شود، رخ می‌دهد
  • ondragover - وقتی که عنصر کشیده شده روی هدف قرار دارد، رخ می‌دهد
  • ondragleave - وقتی که عنصر کشیده شده از هدف خارج می‌شود، رخ می‌دهد
  • ondrop - وقتی که عنصر کشیده شده روی هدف قرار می‌گیرد، رخ می‌دهد

مثال‌ها

وقتی که کاربر عمل کشیدن <p> عنصر را تکمیل می‌کند، جاوااسکریپت اجرا می‌شود:

<p draggable="true" ondragend="myFunction(event)">مرا بکشید!</p>

دست خود را امتحان کنید

در پایین صفحه نمونه‌های بیشتری از TIY وجود دارد.

نحوه استفاده

در HTML:

<عنصر ondragend="myScript">

دست خود را امتحان کنید

در جاوااسکریپت:

عنصر.ondragend = function(){myScript};

دست خود را امتحان کنید

در جاوااسکریپت، از متد addEventListener() استفاده می‌کنیم:

عنصر.addEventListener("dragend", myScript);

دست خود را امتحان کنید

توضیح:اینترنت اکسپلورر 8 یا قدیمی‌تر از آن پشتیبانی نمی‌کند addEventListener() کا متد。

技术细节

冒泡： 支持
可取消： 不支持
事件类型： DragEvent
支持的 HTML 标签： 所有 HTML 元素
DOM 版本： Level 3 Events

浏览器支持

表中的数字注明了完全支持该事件的首个浏览器版本。

وقعت کروم آئی ای فائر فاکس سافری آپریا
ondragend 4.0 9.0 3.5 6.0 12.0

بھی کچھ مثال

تمام ممکنہ تھراب اور ڈراپ اوقات کی نمائش:

<p draggable="true" id="dragtarget">مجھہ تھراب کریں!</p>
<div class="droptarget">یہاں ڈراپ کریں!</div>
<script>
/* ----------------- تھراب کی نشانگا پر رونما ہونے والی واقعات ----------------- */
document.addEventListener("dragstart", function(event) {
  // dataTransfer.setData() کا طریقہ کار کسی تھراب کی ڈاٹا کو اپنے نوعیت اور کا اشارہ دیتا ہے
  event.dataTransfer.setData("Text", event.target.id);
  // پی علامت کو تھراب دینے کی شروعات کے دوران کچھ لکھا گیا
  document.getElementById("demo").innerHTML = "Started to drag the p element.";
  // قابل تھراب علامت کی شفافیت کو بدل دیا گیا
  event.target.style.opacity = "0.4";
});
// پی علامت کو تھراب دینے کے دوران، آؤٹ پتھر کی رنگ کو بدل دیا گیا
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// ختم کاری تھا کہ پی علامت کو تھراب دیا گیا تھا اور کچھ لکھا گیا اور شفافیت کو دوبارہ سیٹ کردیا گیا
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "Finished dragging the p element.";
  event.target.style.opacity = "1";
});
/* ----------------- رویدادهایی که در هدف قرار دادن فعال می‌شوند ----------------- */
// وقتی عنصر قابل حمل p به droptarget وارد می‌شود، لبه‌های DIV را تغییر دهید
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// به صورت پیش‌فرض، نمی‌توان داده/عنصر را در یک عنصر دیگر قرار داد. برای اجازه دادن به قرار دادن، باید عملکرد پیش‌فرض عنصر را جلوگیری کنید
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// وقتی عنصر قابل حمل p از droptarget خارج می‌شود، لبه‌های DIV را تنظیم کنید
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* در زمان قرار دادن - جلوگیری از عملکرد پیش‌فرض مرورگر برای داده‌ها (در صورت قرار دادن به عنوان لینک باز می‌شود) */
رنگ متن خروجی و رنگ لبه DIV را تنظیم کنید
از روش dataTransfer.getData() برای دریافت داده قابل حمل استفاده کنید
داده قابل حمل شناسه عنصر قابل حمل است ("drag1")
عنصر قابل حمل به عنصر قرار داده شده الحاق می شود
*/
document.addEventListener("drop", function(event) {
  event.preventDefault();
  if ( event.target.className == "droptarget" ) {
    document.getElementById("demo").style.color = "";
    event.target.style.border = "";
    var data = event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
  }
});
</script>

دست خود را امتحان کنید

صفحات مرتبط

HTML درس: HTML5 بدرaggable

HTML مرجع دستورات: ویژگی draggable HTML

DOM ایوینٹ DragEvent