How to make content inside a div movable with overflow hidden
Question
I want something like Google maps where you can move the map around in any direction while the parent div is fixed.
Current HTML:
<div class="parent" style="height:60px;width:60px;overflow:hidden">
<div class="child" style="height:120px;width:120px;cursor:move">
This is the child div
</div>
</div>
What sort of method is used for this kind of technique?
2 answers
solution1
3 ACCPTED 2014-07-07 19:19:36
Since you've tagged jquery , take a look at jQuery UI's draggable :
$("#child").draggable();
This basically involves JS events like mousedown, mouseup, mousemove etc, and then calculates the offset to apply on each mousemove using the cursor delta.
For Vertical or Horizontal limit. Initialize with X or Y axis.
$("#child").draggable({ axis: "x" });
solution2
1 2014-07-07 19:28:06
Like Lucas said, use jQuery UI's draggable.
Here is what you're looking for:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$('.drag').draggable();
});
</script>
</head>
<body>
<div class="parent" style="height:60px;width:60px;overflow:hidden">
<div class="drag" style="height:120px;width:120px;cursor:move">
This is the child div
</div>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.