رویداد ondrag

رویدادهای DOM DragEvent

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

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

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

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

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

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

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

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

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

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

توضیح:وقتی عناصر کشیده می‌شوند، رویداد ondrag هر 350 میلی‌ثانیه یک بار فعال می‌شود.

مثال

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

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

آزمایش کنید

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

منطق

در HTML:

<عنصر ondrag="myScript">

آزمایش کنید

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

عنصر.ondrag = function(){myScript};

آزمایش کنید

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

عنصر.addEventListener("drag", myScript);

آزمایش کنید

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

Technical details

Bubble: Supported
Cancelable: Supported
Event type: DragEvent
Supported HTML tags: All HTML elements
DOM version: Level 3 Events

Browser support

The numbers in the table indicate the first browser version that fully supports the event.

Event Chrome IE Firefox Safari Opera
ondrag 4.0 9.0 3.5 6.0 12.0

More examples

Demonstration of all possible drag and drop events:

<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
/* ----------------- Events triggered on the drag target ----------------- */
document.addEventListener("dragstart", function(event) {
  // \+\"The dataTransfer.setData() method sets the data type and value of the data being dragged\+
  event.dataTransfer.setData("Text", event.target.id);
  // \+\"Output some text when the p element starts to drag\+
  document.getElementById("demo").innerHTML = "+\"Started to drag the p element.\"+;
  // \+\"Change the opacity of the draggable element\+
  event.target.style.opacity = "+\"0.4\"+;
});
// \+\"Change the output text color when dragging the p element\+
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "+\"red\"+;
});
// \+\"Complete dragging the p element and output some text and reset opacity\+
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