jquery UI 小框拖动大框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/jquery-ui.min.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<style>
.draggable {
width: 500px;
height: 500px;
float: left;
position:relative;
}
.ui-widget-header {
width: 60px;
height: 60px;
display: block;
}
</style>
<script>
$(function() {
$("#draggable5").draggable({
containment: "parent",
start: function() {
},
drag: function() {
console.log($(this).offset().top)
$("#test").css("top", "-"+$(this).offset().top+"px");
$("#test").css("left", "-"+$(this).offset().left+"px");
},
stop: function() {}
});
});
</script>
</head>
<body>
<div class="draggable ui-widget-content">
<span id="draggable5" class="ui-widget-header">我被约束在父元素内</span>
</div>
<div style="width:500px;height:500px;overflow: hidden;position:relative;float: left;left: 100px;">
<div id="test" style="width:1000px;height:1000px;position: absolute;background: red;left: 0px;top: 0px;">
1. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
2. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
3. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
4. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
5. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
6. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
7. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
8. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
9. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
10. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
11 adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
11. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
12. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
13. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
14. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
15. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
16. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
17. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
18. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
19. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
20. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
21. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
22. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
23. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
24. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
25. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
26. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
27. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
28. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
29. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
30. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
31 adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
31. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
32. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
33. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
34. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
35. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
36. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
37. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
38. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
39. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
40. adfbkjklasjdfkljasklfjaklsdjflaksjfklasjfbkjklasjdfkljasklfjaklsdjflaksjfklasjadfbkjklasjdfkljasklfjaklsdjflaksjfklasj<br>
</div>
</div>
</body>
</html>
