Your IP : 216.73.216.40

Current Path : /var/www/html/manish/
Upload File :
Current File : /var/www/html/manish/test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag and Drop Rows with Numbering</title>
    <style>
        .container {
            width: 70%;
            margin: auto;
            border: 1px solid #000;
            padding: 3px;
        }
        .row {
            padding: 3px;
            margin: 5px 0;
            cursor: move;
            display: flex;
            justify-content: space-between;
        }
        .row.dragging {
            opacity: 0.5;
        }
        .row span {
            margin-right: 3px;
        }
        .row .number {
            margin-right: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>

<h2>Drag and Drop to Reorder Rows (with Numbering)</h2>

<div class="container" id="rowContainer">
    <div class="row" draggable="true">
        <span class="number">1</span>
        <span>Name: John Doe</span> 
        <span>Age: 30</span>
    </div>
    <div class="row" draggable="true">
        <span class="number">2</span>
        <span>Name: Jane Smith</span> 
        <span>Age: 25</span>
    </div>
    <div class="row" draggable="true">
        <span class="number">3</span>
        <span>Name: Bob Johnson</span> 
        <span>Age: 40</span>
    </div>
    <div class="row" draggable="true">
        <span class="number">4</span>
        <span>Name: Alice Brown</span> 
        <span>Age: 35</span>
    </div>
</div>

<script>
    const rows = document.querySelectorAll('.row');
    let draggedRow = null;
    let isTextSelected = false;

    // Detect if user is selecting text (prevents drag-and-drop if true)
    document.addEventListener('selectionchange', () => {
        const selection = window.getSelection().toString();
        isTextSelected = selection.length > 0;
    });

    // Add event listeners for drag and drop
    rows.forEach(row => {
        row.addEventListener('dragstart', function (e) {
            if (isTextSelected) {
                e.preventDefault();  // Prevent dragging if text is being selected
                return;
            }
            draggedRow = row;
            setTimeout(() => row.classList.add('dragging'), 0);
        });

        row.addEventListener('dragend', function () {
            setTimeout(() => {
                row.classList.remove('dragging');
                draggedRow = null;
                updateRowNumbers(); // Update row numbers after drag end
            }, 0);
        });

        row.addEventListener('dragover', function (e) {
            e.preventDefault();
            const container = document.getElementById('rowContainer');
            const afterElement = getDragAfterElement(container, e.clientY);
            if (afterElement == null) {
                container.appendChild(draggedRow);
            } else {
                container.insertBefore(draggedRow, afterElement);
            }
        });
    });

    // Helper function to determine the element to insert after
    function getDragAfterElement(container, y) {
        const draggableElements = [...container.querySelectorAll('.row:not(.dragging)')];

        return draggableElements.reduce((closest, child) => {
            const box = child.getBoundingClientRect();
            const offset = y - box.top - box.height / 2;
            if (offset < 0 && offset > closest.offset) {
                return { offset: offset, element: child };
            } else {
                return closest;
            }
        }, { offset: Number.NEGATIVE_INFINITY }).element;
    }

    // Function to update row numbers
    function updateRowNumbers() {
        const rows = document.querySelectorAll('.row');
        rows.forEach((row, index) => {
            row.querySelector('.number').textContent = index + 1;
        });
    }
</script>

</body>
</html>