کدلپر - مرجع جامع آموزش برنامه‌نویسی

All Right Reserved © 2025 Codoloper

background codoloper

کشیدن و رها کردن در HTML

خانه

API کشیدن و رها کردن (Drag and Drop) در HTML

API کشیدن و رها کردن در HTML این قابلیت را فراهم می‌کند که یک عنصر (element) کشیده و رها شود.

 

کشیدن و رها کردن (Drag and Drop)

کشیدن و رها کردن یک ویژگی بسیار رایج است. این عمل زمانی اتفاق می‌افتد که شما یک شیء را «می‌گیرید» و آن را به مکان دیگری می‌کشید.

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

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

APIDrag and Drop
Chrome4.0
Edge9.0
Firefox3.5
Safari6.0
Opera12.0
 

مثال API کشیدن و رها کردن در HTML

مثال زیر یک نمونه ساده از کشیدن و رها کردن است:

مثال

 
<!DOCTYPE HTML>
<html>
  <head>
    <script>
      function dragstartHandler(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
      }

      function dragoverHandler(ev) {
        ev.preventDefault();
      }

      function dropHandler(ev) {
        ev.preventDefault();
        const data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
      }
    </script>
  </head>
  <body>
    <div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>

    <img
      id="img1"
      src="img_logo.gif"
      draggable="true"
      ondragstart="dragstartHandler(event)"
      width="336"
      height="69"
    />
  </body>
</html>

شاید پیچیده به نظر برسد، اما بیایید تمام بخش‌های مختلف یک رویداد کشیدن و رها کردن را بررسی کنیم.

قابل کشیدن کردن یک عنصر

اول از همه: برای اینکه یک عنصر قابل کشیدن باشد، صفت (attribute) draggable آن را برابر true قرار دهید:

<img id="img1" draggable="true">
یا:

 

 
<p id="p1" draggable="true">Draggable text</p>

چه چیزی را بکشیم - ondragstart و setData()

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

در مثال بالا، صفت ondragstart در عنصر <img> یک تابع (dragstartHandler(ev)) را فراخوانی می‌کند که مشخص می‌کند چه داده‌ای باید کشیده شود.

متد dataTransfer.setData() نوع داده و مقدار داده‌ی کشیده‌شده را تنظیم می‌کند:

function dragstartHandler(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

در این مورد، نوع داده "text" و مقدار آن، شناسه‌ی (id) عنصر قابل کشیدن ("img1") است.

کجا رها کنیم - ondragover

صفت ondragover در عنصر <div> یک تابع (dragoverHandler(ev)) را فراخوانی می‌کند که مشخص می‌کند داده‌ی کشیده‌شده کجا می‌تواند رها شود.

به‌طور پیش‌فرض، داده‌ها/عناصر نمی‌توانند در عناصر دیگر رها شوند. برای اجازه دادن به عمل رها کردن، باید از رفتار پیش‌فرض عنصر جلوگیری کنیم.

این کار با فراخوانی متد preventDefault() برای رویداد ondragover انجام می‌شود:

 
function dragoverHandler(ev) {
  ev.preventDefault();
}

انجام عمل رها کردن - ondrop

وقتی داده‌ی کشیده‌شده رها می‌شود، یک رویداد drop (رها کردن) رخ می‌دهد.

در مثال بالا، صفت ondrop در عنصر <div> یک تابع به نام dropHandler(event) را فراخوانی می‌کند:

 
function dropHandler(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

توضیح کد:

  • متد preventDefault() را فراخوانی کنید تا از رفتار پیش‌فرض مرورگر در قبال داده جلوگیری شود (رفتار پیش‌فرض این است که داده را به‌عنوان یک لینک باز کند).

  • داده‌ی کشیده‌شده را با متد dataTransfer.getData() دریافت کنید. این متد هر داده‌ای را که با همان نوع در متد setData() تنظیم شده باشد، برمی‌گرداند.

  • داده‌ی کشیده‌شده، شناسه‌ی عنصر کشیده‌شده است ("img1").

  • عنصر کشیده‌شده را به عنصر مقصد (جایی که رها می‌شود) اضافه کنید (Append کنید).

مثال‌های بیشتر

چگونه یک عنصر <h1> را بکشیم و در یک عنصر <div> رها کنیم:

 

مثال

<!DOCTYPE HTML>
<html>
  <head>
    <script>
      function dragstartHandler(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
      }

      function dragoverHandler(ev) {
        ev.preventDefault();
      }

      function dropHandler(ev) {
        ev.preventDefault();
        const data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
      }
    </script>
  </head>
  <body>
    <div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>

    <h1 id="h1" draggable="true" ondragstart="dragstartHandler(event)">
      codoloper.com
    </h1>
  </body>
</html>

چگونه یک عنصر <a> را بکشیم و در یک عنصر <div> رها کنیم:

 

مثال

<!DOCTYPE HTML>
<html>
  <head>
    <script>
      function dragstartHandler(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
      }

      function dragoverHandler(ev) {
        ev.preventDefault();
      }

      function dropHandler(ev) {
        ev.preventDefault();
        const data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
      }
    </script>
  </head>
  <body>
    <div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>

    <a id="link1" href="https://codoloper.com" draggable="true" ondragstart="dragstartHandler(event)">codoloper.com</a>
  </body>
</html>