🤏 Drag and Drop API — Uthao Aur Rakh Do

<!-- Draggable item -->
<div
  id="item1"
  draggable="true"
  ondragstart="handleDragStart(event)"
  style="padding: 12px; background: #f0f0f0; margin: 8px 0; cursor: grab;"
>
  🧅 Biryani Ingredients Khareedo
</div>

<!-- Drop zone -->
<div
  id="dropZone"
  ondragover="handleDragOver(event)"
  ondragleave="handleDragLeave(event)"
  ondrop="handleDrop(event)"
  style="padding: 24px; border: 2px dashed #ccc; min-height: 100px;"
>
  Items yahan drop karo
</div>

<script>
let draggedItem = null;

function handleDragStart(e) {
  draggedItem = e.target;
  e.dataTransfer.effectAllowed = "move";
  e.dataTransfer.setData("text/plain", e.target.id);
  e.target.style.opacity = "0.5";
}

function handleDragOver(e) {
  e.preventDefault(); // ZAROORI — bina iske drop nahi hoga!
  e.dataTransfer.dropEffect = "move";
  e.currentTarget.style.borderColor = "#10b981";
  e.currentTarget.style.background = "#f0fdf4";
}

function handleDragLeave(e) {
  e.currentTarget.style.borderColor = "#ccc";
  e.currentTarget.style.background = "transparent";
}

function handleDrop(e) {
  e.preventDefault();
  e.currentTarget.style.borderColor = "#ccc";
  e.currentTarget.style.background = "transparent";

  if (draggedItem) {
    e.currentTarget.appendChild(draggedItem);
    draggedItem.style.opacity = "1";
    draggedItem = null;
  }
}
</script>