Question

我想要像谷歌地图这样的地方，你可以在父div固定的同时向任何方向移动地图。

当前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>

这种技术采用何种方法？

Answer 1

由于您已标记jquery，请查看jQuery UI＆＃39; draggable：

$("#child").draggable();

这基本上涉及mousedown，mouseup，mousemove等JS事件，然后使用游标delta计算要应用于每个mousemove的偏移量。

垂直或水平限制。用X轴或Y轴初始化。

$("#child").draggable({ axis: "x" });

Answer 2

像卢卡斯一样说，使用jQuery UI的可拖动。

以下是您要找的内容：

<!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>

如何使div内的内容移动，隐藏溢出

2 个答案: