رویداد ondragend

رویدادهای DOM DragEvent

پیشنهاد درس:

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

وقتی کاربر عملیات کشیدن عنصر یا انتخاب متن به پایان می‌رسد، رویداد ondragend رخ می‌دهد. کشیدن و رها کردن HTML5کشیدن و رها کردن یکی از قابلیت‌های بسیار رایج HTML5 است. این بدان معناست که وقتی یک شیء را "گرفتید" و به یک مکان دیگر می‌کشید. برای یادگیری بیشتر، به مطالب ما در مورد

توضیح:در آموزش‌های HTML استفاده کنید. برای اینکه عنصری قابل کشیدن باشد، از تنظیم global.

خصوصیت draggable HTML5نکته:

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

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

- وقتی کاربر عملیات کشیدن عنصر به پایان می‌رسد، رخ می‌دهد

- وقتی عنصر کشیده شده روی هدف قرار می‌گیرد، رخ می‌دهد

مثال:

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

آزمایش کنید

<p draggable="true" ondragend="myFunction(event)">Drag me!</p>

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

منطق:

در HTML:< elementmyScriptondragend="

آزمایش کنید

">

در جاوااسکریپت، از روش addEventListener() استفاده می‌کنید:در جاوااسکریپت:myScript.ondragend = function(){

آزمایش کنید

};

در جاوااسکریپت، از روش addEventListener() استفاده می‌کنید:.addEventListener("dragend", myScript);

آزمایش کنید

توضیح:اینترنت اکسپلورر 8 یا نسخه‌های پیشین از آن پشتیبانی نمی‌کند مетод addEventListener().

جزئیات فنی

بوم‌زدایی: پشتیبانی می‌شود
قابل لغو: پشتیبانی نمی‌شود
نوع رویداد: DragEvent
برچسب‌های HTML پشتیبانی شده: تمام عناصر HTML
نسخه DOM: رویدادهای سطح 3

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

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر هستند که از این رویداد پشتیبانی می‌کند.

رویداد کروم IE افراط سافاری آپرا
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) {
  // روش setData() در dataTransfer داده نوع و مقدار داده‌ای که کشیده می‌شود را تنظیم می‌کند
  event.dataTransfer.setData("Text", event.target.id);
  // هنگام شروع کشیدن عنصر p، یک متن اضافه کنید
  document.getElementById("demo").innerHTML = "شروع به کشیدن عنصر p کرده‌ام.";
  // شفافیت عنصر قابل کشیدن را تغییر دهید
  event.target.style.opacity = "0.4";
});
// در حال کشیدن عنصر p، رنگ متن را تغییر دهید
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// پس از تکمیل کشیدن عنصر p، یک متن اضافه کرده و شفافیت را تنظیم کنید
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "+بازیابی کردن متن درون HTML+";
  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

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

رویدادهای DOM DragEvent