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>