رویداد ondragend در HTML5 پایان دراگ و دراپ با ماوس

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 و jQuery

در این مقاله از سایت آموزی جهت استفاده شما عزیزان به معرفی صفت رویدادی ondragend در سند html می پردازیم. ویژگی رویدادی ondragend زمانی رخ میدهد که عمل کشیدن و رها کردن یا Drag and Drop یگ تگ html ، به وسیله ماوس به پایان رسیده باشد. خصوصیت ondragend یک رویداد عمومی تگ های html است. و در HTML5 معرفی شده است.

رویداد ondragend در HTML5 پایان دراگ و دراپ با ماوس - سایت آموزی

معرفی صفت رویدادی ondragend در سند HTML5

صفت رویدادی ondragend زمانی رخ میدهد که عمل کشیدن و رها کردن یا Drag and Drop یگ تگ html ، به وسیله ماوس به پایان رسیده باشد. خصوصیت دراگ و دراپ در HTML5 معرفی شده و توسط چند ویژگی و رویداد کنترل می شوذ.

برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 و jQuery

که خاصیت رویدادی ondragend و صفت draggable از جمله آنها می باشد. لینک ها و تصاویر برای کشیده شدن نیازی به صفت draggable ندارند. ویژگی رویدادی ondragend در دسته رویداد های ماوس قرار می گیرد. این رویداد هم جزء رویداد عمومی در تگ های html است.

ویژگی ها و رویدادهای دراگ و دراپ کردن تگ های html عبارتند از :

  1. ondragstart
  2. ondragend
  3. ondrag
  4. ondragenter 
  5. ondragover
  6. ondragleave
  7. ondrop

مثال در مورد استفاده از ویژگی ondragend درون تگ p

<p>Drag the p element back and forth between the two rectangles:</p>
<div class=”droptarget” ondrop=”drop(event)” ondragover=”allowDrop(event)”>
<p ondragstart=”dragStart(event)” ondragend=”dragEnd(event)” draggable=”true” id=”dragtarget”>Drag me!</p>
</div>
<div class=”droptarget” ondrop=”drop(event)” ondragover=”allowDrop(event)”></div>
<p style=”clear:both;”><strong>Note:</strong> drag events are not supported in Internet Explorer 8 and earlier versions or Safari 5.1 and earlier versions.</p>
<p id=”demo”></p>
<script>
     function dragStart(event) {
           event.dataTransfer.setData(“Text”, event.target.id);
           document.getElementById(“demo”).innerHTML = “Started to drag the p element”;
     }
     function dragEnd(event) {
          document.getElementById(“demo”).innerHTML = “Finished dragging the p element.”;
    }
    function allowDrop(event) {
         event.preventDefault();
    }
    function drop(event) {
       event.preventDefault();
       var data = event.dataTransfer.getData(“Text”);
       event.target.appendChild(document.getElementById(data));
  }
</script>

بررسی ویژگی ondragend درون سند html 4.0.1 و HTML5

خاصیت رویدادی ondragend ، در نسخه HTML5 معرفی شده و HTML4.01 نسخه های قبلی وجود نداشته و پشتیبانی نمی شود.

برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 و jQuery

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

پیوندهای کاربردی و مفید

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

رویداد ondragend در HTML5 پایان دراگ و دراپ با ماوس – اختصاصی سایت آموزی