library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Interactions: Add a draggable map demo. Custom containment logic still needs some improvements.

Browse Source
This commit is contained in:
Jörn Zaefferer 2012-03-05 11:50:53 +01:00
parent b110de98e1
commit 0cc4329747
2 changed files with 74 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demos/draggable/index.html
View File

@ -21,6 +21,7 @@
<li><a href="handle.html">Drag handle</a></li>
<li><a href="cursor-style.html">Cursor style</a></li>
<li><a href="sortable.html">Draggable + Sortable</a></li>
<li><a href="map.html">Draggable Map</a></li>
</ul>
</div>

73
demos/draggable/map.html Normal file
View File

@ -0,0 +1,73 @@
<!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%; }
#map { width: 100%; height: 100%; max-width: 640px; overflow: hidden; position: relative; }
#map img { position: absolute; }
</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({
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&center=Vienna">
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>Drag the map around inside the viewport. Works with touch devices.</p>
</div><!-- End demo-description -->
</body>
</html>