"if you encounter any errors in SAP, send me a screenshot at pramod@learntosap.com, and I will help you resolve the issue."

HTML Drag and Drop API Tag –

HTML TUTORIALS-

HTML Drag and Drop API Tag –

Introduction-

🔹HTML Drag and Drop API allows you to move elements around the page using your mouse (or touch). It's easy to useful for building custom UIs like sortable lists, file uploads, or drag-to-organize interfaces... Here's a basic example.

🔑 Key Parts: -

✅ draggable="true" — makes the element draggable.

✅ ondragstart, ondrop, ondragover — event handlers.

✅ dataTransfer.setData() and getData() — to move elements.

✅ Basic Example of HTML Drag and Drop:-

Basic Drag and Drop
Drag me
Drop here
<!DOCTYPE html> 
<html>
<head>
  <title>Basic Drag and Drop</title>
  <style>
    #dragme {
      width: 100px;
      height: 100px;
      background-color: #3498db;
      color: white;
      text-align: center;
      line-height: 100px;
      cursor: move;
    }

    #dropzone {
      width: 200px;
      height: 150px;
      border: 2px dashed #ccc;
      margin-top: 20px;
    }
  </style>
</head>
<body>

<div id="dragme" draggable="true">Drag me</div>
<div id="dropzone">Drop here</div>

<script>
  const dragme = document.getElementById("dragme");
  const dropzone = document.getElementById("dropzone");

  dragme.addEventListener("dragstart", (e) => {
    e.dataTransfer.setData("text", e.target.id);
  });

  dropzone.addEventListener("dragover", (e) => {
    e.preventDefault();
  });

  dropzone.addEventListener("drop", (e) => {
    e.preventDefault();
    const data = e.dataTransfer.getData("text");
    dropzone.appendChild(document.getElementById(data));
  });
</script>

</body>
</html>

✅ Example 2: Reordering List Items:-

Reorder List 
<!DOCTYPE html>
<html>
<head>
  <title>Drag Images</title>
  <style>
    #gallery, #dropbox {
      border: 2px dashed gray;
      padding: 20px;
      min-height: 150px;
    }
    img {
      width: 100px;
      margin: 10px;
      cursor: move;
    }
  </style>
</head>
<body>

<div id="gallery">
  <img src="https://via.placeholder.com/100" draggable="true" id="img1">
  <img src="https://via.placeholder.com/100/ff4444" draggable="true" id="img2">
</div>

<div id="dropbox">Drop images here</div>

<script>
  const imgs = document.querySelectorAll("img");
  const dropbox = document.getElementById("dropbox");

  imgs.forEach(img => {
    img.addEventListener("dragstart", (e) => {
      e.dataTransfer.setData("text", e.target.id);
    });
  });

  dropbox.addEventListener("dragover", (e) => {
    e.preventDefault();
  });

  dropbox.addEventListener("drop", (e) => {
    e.preventDefault();
    const data = e.dataTransfer.getData("text");
    const draggedImg = document.getElementById(data);
    dropbox.appendChild(draggedImg);
  });
</script>

</body>
</html>

✅ Example 3: Drag Images into Gallery:-

Drag Images
Drop images here
<!DOCTYPE html>
<html>
<head>
  <title>Drag Images</title>
  <style>
    #gallery, #dropbox {
      border: 2px dashed gray;
      padding: 20px;
      min-height: 150px;
    }
    img {
      width: 100px;
      margin: 10px;
      cursor: move;
    }
  </style>
</head>
<body>

<div id="gallery">
  <img src="https://via.placeholder.com/100" draggable="true" id="img1">
  <img src="https://via.placeholder.com/100/ff4444" draggable="true" id="img2">
</div>

<div id="dropbox">Drop images here</div>

<script>
  const imgs = document.querySelectorAll("img");
  const dropbox = document.getElementById("dropbox");

  imgs.forEach(img => {
    img.addEventListener("dragstart", (e) => {
      e.dataTransfer.setData("text", e.target.id);
    });
  });

  dropbox.addEventListener("dragover", (e) => {
    e.preventDefault();
  });

  dropbox.addEventListener("drop", (e) => {
    e.preventDefault();
    const data = e.dataTransfer.getData("text");
    const draggedImg = document.getElementById(data);
    dropbox.appendChild(draggedImg);
  });
</script>

</body>
</html>

Live Code Preview

May Be Like Important Link-

-How To Import Data(LSMW) LEGACY SYSTEM MIGRATION WORKBENCH

-Define Condition Type-OBYZ

-Genral Ledger Chart Of Accounts-OBD4

-Document 90039783 saved (no accounting document generated)