有没有办法用jquery ui实现这种可拖动的效果？

Question

有没有办法使用jquery UI创建this效果？

提前感谢。

Answer 1

是的，如果您使用firebug并检查元素，您将看到另一个div中有一个可拖动的div，它有溢出：隐藏属性。

<div style="width: 300px; height: 300px; overflow: hidden;">
    <div id="draggable" style="width: 800px; height: 800px;"></div>
</div>

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

这是概念。

Answer 2

您可以使用jQuery UI Draggable的containment选项。

以下是一个示例：http://jsfiddle.net/AZwbP/

Answer 3

使用jQuery draggable无法实现。因为这里可拖动的项目不应该被拖动，使得它的顶部/左侧点大于其容器。所有4个点都是如此。

使用jQuery draggable，您无法限制某个元素的拖动超出某些条件。

我建议使用mousedown和mousemove事件用法创建一个自定义jQuery插件。