weltkarte-drag-drop-mit-positions-anzeige.php


Quell Code


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
        body {
            position: relative;
            margin: 0;
            padding: 0;
        }
        #worldmap {
            width: 100%;
            height: auto;
        }
        a {
            display: inline-block;
            width: 5%;
            position: absolute;
        }
        img {
            width: 100%;
            height: auto;
            pointer-events: none;
        }
        #golden-retriever {
            left: 40%;
            top: 20%;
        }
        #collie {
            left: 60%;
            top: 40%;
        }
    </style>
</head>
<body>
    <img id="worldmap" src="http://webentwicklung.ulrichbangert.de/images/worldmap.svg" />
    <a class="dog" id="golden-retriever" href="https://de.wikipedia.org/wiki/Golden_Retriever">
        <img src="http://webentwicklung.ulrichbangert.de/images/golden-retriever-cropped.jpg" />
    </a>
    <a class="dog" id="collie" href="https://de.wikipedia.org/wiki/Langhaarcollie">
        <img src="http://webentwicklung.ulrichbangert.de/images/collie-cropped.jpg" />
    </a>
    <span id="output"></span>
    <script>
        $("#worldmap").on("load", function () {
            $(".dog").draggable({
                drag: function (event, ui) {
                    // var w = $(this).width();
                    // var h = $(this).height();
                    var w = $("#worldmap").width();
                    var h = $("#worldmap").height();
                    var top = Math.floor(ui.position.top);
                    var left = Math.floor(ui.position.left);
                    $("#output").html(
                        "top: " + top + "px " + (top / h * 100).toFixed(2) + "%<br>"
                        + "left: " + left + "px " + (left / w * 100).toFixed(2) + "%");
                }
            });
        });
    </script>
</body>
</html>