رویداد ondragenter

رویدادهای DOM DragEvent

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

وقتی که یک عنصر قابل حرکت یا انتخاب متنی به عنوان هدف قرار می‌گیرد، رویداد ondragenter رخ می‌دهد.

رویدادهای ondragenter و ondragleave به کاربر کمک می‌کنند تا بفهمد یک عنصر قابل حرکت به زودی به عنوان هدف قرار می‌گیرد یا از هدف خارج می‌شود. به عنوان مثال، می‌توانید با تنظیم رنگ پس‌زمینه در هنگام ورود عنصر قابل حرکت به عنوان هدف و حذف آن در هنگام خروج از هدف، این کار را انجام دهید.

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

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

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

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

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

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

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

مثال:

وقتی که یک عنصر قابل حرکت به عنوان هدف قرار می‌گیرد، جاوااسکریپت اجرا می‌شود:

به طور مستقیم امتحان کنید

<div ondragenter="myFunction(event)"></div>

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

نحوه‌ی نوشتن:

در HTML:< elementmyScriptondragenter="

به طور مستقیم امتحان کنید

">

در JavaScript، از روش addEventListener() استفاده کنید:در JavaScript:myScript.ondragenter = function(){

به طور مستقیم امتحان کنید

};

در JavaScript، از روش addEventListener() استفاده کنید:.addEventListener("dragenter", myScript);

به طور مستقیم امتحان کنید

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

جزئیات فنی

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

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

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

رویداد کروم IE افریق سفاری آپرا
ondragenter 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 = ";
کامپایل کردن پایان دادن به کشیدن عنصر p.";
  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