2012-03-05 10:50:53 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
|
|
|
|
|
<title>jQuery UI Draggable - Draggable Map</title>
|
|
|
|
|
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
|
|
|
|
<script src="../../jquery-1.7.1.js"></script>
|
|
|
|
|
<script src="../../ui/jquery.ui.core.js"></script>
|
|
|
|
|
<script src="../../ui/jquery.ui.widget.js"></script>
|
|
|
|
|
<script src="../../ui/jquery.ui.interaction.js"></script>
|
|
|
|
|
<script src="../../ui/jquery.ui.draggable.js"></script>
|
|
|
|
|
<link rel="stylesheet" href="../demos.css">
|
|
|
|
|
<style>
|
|
|
|
|
html, body, .demo { height: 90%; }
|
2012-03-06 18:34:47 +00:00
|
|
|
#map { width: 100%; height: 100%; max-width: 320px; overflow: hidden; position: relative; }
|
2012-03-05 11:02:34 +00:00
|
|
|
#map img { position: absolute; cursor: pointer; }
|
|
|
|
|
#map .ui-draggable-dragging { cursor: url('closedhand.cur'), move; }
|
2012-03-05 10:50:53 +00:00
|
|
|
</style>
|
|
|
|
|
<script>
|
|
|
|
|
$(window).load(function() {
|
|
|
|
|
var viewport = $("#map");
|
|
|
|
|
var img = viewport.find("img");
|
|
|
|
|
var viewWidth = viewport.width();
|
|
|
|
|
var viewHeight = viewport.height();
|
|
|
|
|
var imgWidth = img.width();
|
|
|
|
|
var imgHeight = img.height();
|
|
|
|
|
var leftMax = imgWidth - viewWidth;
|
|
|
|
|
var topMax = imgHeight - viewHeight;
|
|
|
|
|
img.draggable({
|
2012-03-05 11:02:34 +00:00
|
|
|
start: function() {
|
|
|
|
|
$(this).addClass("ui-draggable-dragging");
|
|
|
|
|
},
|
|
|
|
|
stop: function() {
|
|
|
|
|
$(this).removeClass("ui-draggable-dragging");
|
|
|
|
|
},
|
2012-03-05 10:50:53 +00:00
|
|
|
drag: function(event, ui) {
|
|
|
|
|
if (viewWidth > imgWidth) {
|
|
|
|
|
// center when there's just one image
|
|
|
|
|
ui.position.left = viewWidth / 2 - imgWidth / 2;
|
|
|
|
|
} else {
|
|
|
|
|
if (ui.position.left > 0) {
|
|
|
|
|
ui.position.left = 0;
|
|
|
|
|
} else if (ui.position.left + imgWidth < viewWidth) {
|
|
|
|
|
ui.position.left = -leftMax;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (viewHeight > imgHeight) {
|
|
|
|
|
// center when the view is bigger then the image
|
|
|
|
|
ui.position.top = viewHeight / 2 - imgHeight / 2;
|
|
|
|
|
} else {
|
|
|
|
|
if (ui.position.top > 0) {
|
|
|
|
|
ui.position.top = 0;
|
|
|
|
|
} else if (ui.position.top + imgHeight < viewHeight) {
|
|
|
|
|
ui.position.top = -topMax;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div class="demo">
|
|
|
|
|
|
|
|
|
|
<div id="map" class="ui-widget-content">
|
|
|
|
|
<img src="http://maps.google.com/maps/api/staticmap?zoom=11&size=640x640&maptype=terrain&sensor=false¢er=Vienna">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div><!-- End demo -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="demo-description">
|
2012-03-06 18:34:47 +00:00
|
|
|
<p>Drag the map around inside the viewport. Works with touch devices. The container is kept small for the demo to work.</p>
|
2012-03-05 10:50:53 +00:00
|
|
|
</div><!-- End demo-description -->
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
