رویداد ondragleave

رویدادهای DOM DragEvent

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

وقتی یک عنصر قابل حرکت یا انتخاب متنی از یک هدف معتبر خارج می‌شود، رویداد ondragleave رخ می‌دهد.

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

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

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

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

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

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

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

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

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

实例

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

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

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

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

شیوه‌نویسی

در HTML:

<element ondragleave="myScript">

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

در JavaScript:

object.ondragleave = function(){myScript};

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

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

object.addEventListener("dragleave", myScript);

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

نکته:Internet Explorer 8 یا نسخه‌های پیشین از آن پشتیبانی نمی‌کند مетод addEventListener()。

技术细节

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

浏览器支持

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

事件 Chrome IE Firefox Safari Opera
ondragleave 4.0 9.0 3.5 6.0 12.0

实例

对所有可能的拖放事件的演示：

<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
/* ----------------- 在拖动目标上触发的事件 ----------------- */
document.addEventListener("dragstart", function(event) {
  // \+\"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: ویژگی draggable HTML

رویدادهای DOM DragEvent