Drag Drop inventory pull sheet

<div class="container">
  <div class="column" id="inventory" ondrop="drop(event)" ondragover="allowDrop(event)">
    <h3>Inventory Stock</h3>
    <div id="item-1" class="pull-item" draggable="true" ondragstart="drag(event)">
      <span>📦 Widget A</span>
      <button class="remove-btn" onclick="returnToStock('item-1')">↺</button>
    </div>
    <div id="item-2" class="pull-item" draggable="true" ondragstart="drag(event)">
      <span>📦 Widget B</span>
      <button class="remove-btn" onclick="returnToStock('item-2')">↺</button>
    </div>
    <div id="item-3" class="pull-item" draggable="true" ondragstart="drag(event)">
      <span>📦 Widget C</span>
      <button class="remove-btn" onclick="returnToStock('item-3')">↺</button>
    </div>
    <div id="item-4" class="pull-item" draggable="true" ondragstart="drag(event)">
      <span>📦 Widget D</span>
      <button class="remove-btn" onclick="returnToStock('item-4')">↺</button>
    </div>
  </div>

<div class="column" id="pull-sheet" ondrop="drop(event)" ondragover="allowDrop(event)">
    <h3>Current Pull Sheet</h3>
    <div id="placeholder" class="placeholder">Drop items here to pull</div>
  </div>
</div>

.container {
    display: flex;
    gap: 20px;
    font-family: sans-serif;
}

.column {
    flex: 1;
    min-height: 300px;
    background: #f4f4f4;
    border: 2px dashed #ccc;
    padding: 15px;
    border-radius: 8px;
}

.pull-item {
    padding: 12px;
    margin: 10px 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: grab;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.pull-item:active {
    cursor: grabbing;
}

/* The "Ghost" effect while dragging */
.dragging {
    opacity: 0.5;
    border: 2px solid #007bff;
}

.placeholder {
    color: #888;
    text-align: center;
    margin-top: 50px;
}

.pull-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    margin: 10px 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: grab;
}

.remove-btn {
    background: #ffeded;
    border: 1px solid #ffcccc;
    color: #cc0000;
    border-radius: 4px;
    cursor: pointer;
    padding: 2px 8px;
    font-weight: bold;
    transition: 0.2s;
}

.remove-btn:hover {
    background: #cc0000;
    color: white;
}

#inventory .remove-btn {
    display: none;
}

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

function drag(ev) {
    ev.dataTransfer.setData("textID", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    const id = ev.dataTransfer.getData("textID");
    const item = document.getElementById(id);
    
    // Find the closest column (to avoid dropping an item inside another item)
    let targetColumn = ev.target;
    if (!targetColumn.classList.contains('column')) {
        targetColumn = targetColumn.closest('.column');
    }

targetColumn.appendChild(item);
    updatePlaceholder();
}

// Function for the "Remove" button
function returnToStock(itemId) {
    const item = document.getElementById(itemId);
    const inventory = document.getElementById('inventory');
    inventory.appendChild(item);
    updatePlaceholder();
}

// Shows/hides the "Empty" message
function updatePlaceholder() {
    const pullSheet = document.getElementById('pull-sheet');
    const placeholder = document.getElementById('placeholder');
    // Count items excluding the placeholder itself
    const itemCount = pullSheet.querySelectorAll('.pull-item').length;
    placeholder.style.display = (itemCount > 0) ? 'none' : 'block';
}

- Drag Drop inventory pull sheet

Live Preview