رویداد ondragstart

رویدادهای DOM DragEvent

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

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

کشیدن و رها کردن یکی از کاربردی‌ترین ویژگی‌های HTML5 است. این کار زمانی انجام می‌شود که شما یک شیء را "گرفته" و به یک مکان دیگر می‌کشید. برای یادگیری بیشتر، لطفاً کشیدن و رها کردن HTML5HTML tutorial استفاده کنید.

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

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

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

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

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

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

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

مثال‌ها

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

<p draggable="true" ondragstart="myFunction(event)">بازمایم!</p>

آزمایش کنید

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

نحوه‌ی نوشتن

در HTML:

<element ondragstart="myScript">

آزمایش کنید

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

object.ondragstart = function(){myScript};

آزمایش کنید

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

object.addEventListener("dragstart", myScript);

آزمایش کنید

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

جزئيات فني

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

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

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

رويداد کروم آي‌إي فايرفاکس سفاري آپرا
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) {
  // روش setData() dataTransfer داده‌هاي تيرکي شده را نوع داده و مقدار تنظيم مي‌کند
  event.dataTransfer.setData("Text", event.target.id);
  // در حالي که پي‌المنت در حال تيرکي است، خروجي را نشان ميدهد
  document.getElementById("demo").innerHTML = ";
  // شفافيت عنصر قابل تيرکي را تغيير مي‌دهد
  event.target.style.opacity = "0.4";
});
// در حالي که پي‌المنت در حال تيرکي است، رنگ خروجي را تغيير مي‌دهد
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// كسي که به پي‌المنت اجرا شده است خروجي را نشان ميدهد و شفافيت را تنظيم مي‌کند
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = ";
  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