Sindbad~EG File Manager

Current Path : /home/beeson/public_html/WebMathXpert/Examples/
Upload File :
Current File : //home/beeson/public_html/WebMathXpert/Examples/TitleTest.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draggable Example</title>
    <style>
        #draggableTitle0 {
            position: absolute;
            cursor: move;
            border: none;
            background-color: transparent;
            text-shadow: none;
            padding: 5px;
            color: black;
            top: 10px;
            left: 10px; /* Initial position */
            z-index: 2; /* Ensure it's above other elements */
        }
    </style>
</head>
<body>
	 <div id="svgContainer">
    <div id="draggableTitle0" style="position: absolute; cursor: move; border: none;background-color: transparent"  padding: 5px;>Draggable Title </div> 
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var draggableTitle0 = document.getElementById("draggableTitle0");

            // Capture initial styles using computed styles
            var initialComputedStyles = window.getComputedStyle(draggableTitle0);
            console.log('Initial computed styles - left:', initialComputedStyles.left, 'top:', initialComputedStyles.top);
            
            // Log initial inline styles (should be empty if not set)
            console.log('Initial inline style.left:', draggableTitle0.style.left);
            console.log('Initial inline style.top:', draggableTitle0.style.top);

            // New positions
            var left = 100;
            var top = 50;

            // Use MutationObserver to monitor changes to the element
            const observer = new MutationObserver(mutations => {
                mutations.forEach(mutation => {
                    console.log('Mutation observed:', mutation);
                    console.log('Updated inline styles - left:', draggableTitle0.style.left, 'top:', draggableTitle0.style.top);
                });
            });

            // Start observing the target node for configured mutations
            observer.observe(draggableTitle0, { attributes: true, attributeFilter: ['style'] });

            // Set the new position
            draggableTitle0.style.left = left + 'px';
            draggableTitle0.style.top = top + 'px';

            // Log new inline styles
            console.log('New inline style.left:', draggableTitle0.style.left);
            console.log('New inline style.top:', draggableTitle0.style.top);

            // Verify that the positions are correctly set
            var updatedComputedStyles = window.getComputedStyle(draggableTitle0);
            console.log('Updated computed styles - left:', updatedComputedStyles.left, 'top:', updatedComputedStyles.top);
        });
    </script>
</body>
</html>

Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists