ondragstart ایوینٹ

DOM ایوینٹ DragEvent

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

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

کشیدن و قرار دادن یک ویژگی بسیار معمول در HTML5 است. این زمانی است که شما یک شیء را "گرفتار" کرده و آن را به مکان دیگری می‌کشید. برای یادگیری بیشتر، مقالات ما را در مورد HTML5 کا درآمد و خروجآموزش HTML استفاده کنید.

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

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

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

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

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

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

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

مثال

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

<p draggable="true" ondragstart="myFunction(event)">بکش من!</p>

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

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

نحوه‌ی نوشتن

در HTML:

<عنصر ondragstart="myScript">

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

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

م物体.ondragstart = function(){myScript};

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

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

م物体.addEventListener("dragstart", myScript);

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

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

جزئیات فنی

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

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

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

رویداد کروم IE افراط سفاری آپرا
ondragstart 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) {
  // تنظیم نوع داده و مقدار داده به وسیله method dataTransfer.setData()
  event.dataTransfer.setData("Text", event.target.id);
  // چاپ چندین متن در زمان شروع تمرین تیرک p
  document.getElementById("demo").innerHTML = "Started to drag the p element.";
  // تغییر شفافیت عنصر قابل تمرین
  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 = "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 حرکت

HTML مرجع: HTML draggable درج

DOM ایوینٹ DragEvent