رویداد ondrop

رویدادهای DOM DragEvent

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

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

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

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

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

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

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

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

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

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

مثال

وقتی یک عنصر قابل حرکت در داخل عنصر <div> قرار می‌گیرد، جاوااسکریپت اجرا می‌شود:

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

آزمایش کنید

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

نحوه‌ی نوشتن

در HTML:

<عنصر ondrop="myScript">

آزمایش کنید

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

اجسام.ondrop = function(){myScript};

آزمایش کنید

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

اجسام.addEventListener("drop", myScript);

آزمایش کنید

نکته:نسخه‌ی اینترنت اکسپلورر 8 یا قدیمی‌تر پشتیبانی نمی‌کند addEventListener() 方法。

技术细节

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

浏览器支持

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

事件 Chrome IE Firefox Safari Opera
ondrop 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