mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
c15481eeb1
Conflicts: demos/draggable/constrain-movement.html demos/draggable/cursor-style.html demos/draggable/default.html demos/draggable/events.html demos/draggable/handle.html demos/draggable/revert.html demos/draggable/visual-feedback.html demos/droppable/default.html grunt.js tests/unit/draggable/draggable.html tests/unit/draggable/draggable_core.js tests/unit/draggable/draggable_options.js tests/unit/draggable/draggable_test_helpers.js tests/unit/droppable/droppable.html tests/unit/droppable/droppable_options.js ui/draggable.js ui/jquery.ui.droppable.js ui/sortable.js
74 lines
2.4 KiB
HTML
74 lines
2.4 KiB
HTML
<!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/all.css">
|
|
<script src="../../jquery-1.10.2.js"></script>
|
|
<script src="../../ui/core.js"></script>
|
|
<script src="../../ui/widget.js"></script>
|
|
<script src="../../ui/interaction.js"></script>
|
|
<script src="../../ui/draggable.js"></script>
|
|
<link rel="stylesheet" href="../demos.css">
|
|
<style>
|
|
html, body, .demo { height: 90%; }
|
|
#map { width: 100%; height: 100%; max-width: 320px; overflow: hidden; position: relative; }
|
|
#map img { position: absolute; cursor: pointer; }
|
|
#map .ui-draggable-dragging { cursor: url('closedhand.cur'), move; }
|
|
</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({
|
|
start: function() {
|
|
$(this).addClass("ui-draggable-dragging");
|
|
},
|
|
stop: function() {
|
|
$(this).removeClass("ui-draggable-dragging");
|
|
},
|
|
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 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" alt="Map of Vienna">
|
|
</div>
|
|
|
|
<div class="demo-description">
|
|
<p>Drag the map around inside the viewport. Works with touch devices. The container is kept small for the demo to work.</p>
|
|
</div>
|
|
</body>
|
|
</html>
|