Thiết kế website giá rẻ

Question

I have a webpage where I want to sort div containers into different lists. One of these containers contains an embedded Google Street View image. My problem is that the Street View resets every time the container is moved to a different list.

For example: The user rotates the Street View slightly to the right and then sorts the container into one of the lists. After that, the view resets to the default view.

Here is my code:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
    .container {
        margin: 10px;
        padding: 10px;
        border: 1px solid black;
    }
    .list {
        margin: 20px;
        padding: 10px;
        border: 1px solid blue;
        min-height: 50px;
    }
    .button {
        margin: 5px;
    }

    .iframe-container {
        margin: 10px;
        padding: 10px;       
    }
</style>
</head>

<body>
    <h1>Div-Container with Buttons</h1>
    <div id="container-list">
        <div class="container" id="container1">
            Container 1
            <div class="iframe-container">
                <iframe id="mapIframe" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
            </div>
            <button class="button" onclick="moveTo(1, 'container1')">Move to List 1</button>
            <button class="button" onclick="moveTo(2, 'container1')">Move to List 2</button>
        </div>
        <div class="container" id="container2">
            Container 2
            <br>
            <button class="button" onclick="moveTo(1, 'container2')">Move to List 1</button>
            <button class="button" onclick="moveTo(2, 'container2')">Move to List 2</button>
        </div>
        <div class="container" id="container3">
            Container 3
            <br>
            <button class="button" onclick="moveTo(1, 'container3')">Move to List 1</button>
            <button class="button" onclick="moveTo(2, 'container3')">Move to List 2</button>
        </div>
    </div>

    <h2>List 1</h2>
    <div class="list" id="list1"></div>
    <h2>List 2</h2>
    <div class="list" id="list2"></div>

    <script>
        function moveTo(listNumber, containerId) {
            const container = document.getElementById(containerId);
            const targetList = document.getElementById('list' + listNumber);

            // Move the container to the target list without reloading the iframe
            targetList.appendChild(container);
        }

        function getRandomMap() {
            const maps = {
                'https://www.google.com/maps/embed?pb=!4v1717139927658!6m8!1m7!1sCAoSLEFGMVFpcE9OdFI0alRjaVdsZVlJYUVnZG9HZkhoQXQwNzl2QkZobHNZQVEz!2m2!1d3.8049392!2d-55.6741967!3f1.6715614476019027!4f-0.8205842451334462!5f0.7820865974627469': 'Suriname',
                'https://www.google.com/maps/embed?pb=!4v1717884923553!6m8!1m7!1ssSQq0UaGx35g0ltnrk8k8g!2m2!1d29.97424481089817!2d31.12713921432243!3f239.89374126624176!4f-8.277961875280567!5f0.7820865974627469': 'Egypt',
                'https://www.google.com/maps/embed?pb=!4v1717885744217!6m8!1m7!1sLVODstFNjIUJl0Ju1L9nHQ!2m2!1d45.42544503518906!2d12.33231138473412!3f166.6227746012717!4f14.382735074720486!5f0.7820865974627469': 'Italy'
            };
            const keys = Object.keys(maps);
            const randomKey = keys[Math.floor(Math.random() * keys.length)];
            return {
                url: randomKey,
                country: maps[randomKey]
            };
        }

        // Initialize the random map and set it to the iframe once
        window.onload = function() {
            const randomMap = getRandomMap();
            document.getElementById('mapIframe').src = randomMap.url;
        };
    </script>
</body>
</html>

I tried solving the issue by temporarily removing the iframe from the DOM before moving the container and reattaching it afterward. However, the view still resets each time. Does anyone have any ideas on how to keep the view intact after sorting?

Thiết kế website giá rẻ

Danh mục

How to Prevent Google Street View iFrame from Resetting When Sorting Div Containers?