包含 jQueryUI 可拖动的自定义

Question

我希望使用 jQueryUI 的可拖动小部件，但限制对象，使其绑定到浏览器窗口的顶部、左侧和右侧。

但是，我希望允许对象能够在窗口下方拖动，直到对象只有 30 个像素可见。那时我希望它不允许进一步向下拖动。因此，我希望对象的至少 30 像素始终可见，这样仍然可以轻松地将其拖回到视图中。

是否可以使用插件在约束上定义此类型？如果可以，如何完成？

Answer 1

可拖动小部件有一个可以使用的 containment 选项限制可拖动元素可以拖动的范围。该选项可以采用一组值，因此类似这样的东西应该可以解决问题：

$("#example").draggable({
   containment: [0, 0, document.width, document.height - 70]
});

这是一个工作示例以上。我从 document.height 中减去了 70，因为示例中的可拖动元素的高度为 100px。