Javascript 如何通过可拖动对象进行视口滚动

我正在利用jQuery的可拖动功能。视口div是整个窗口的大小。视口中有一个可拖动的容器div，它比视口本身大得多，给人通过窗口查看容器小部分的感觉。该容器包含也可拖动的对象div

目前，容器div和对象div都在视口div周围正确拖动。我遇到的问题是，如果对象div位于viewport div边缘的特定像素范围内，我想“推”视口

JQuery的draggable函数有一个drag事件，我一直试图在对象上使用它。我可以让视口滚动，但它需要鼠标始终保持对象移动以保持滚动。我期待有对象得到像素范围内，能够不移动鼠标，但仍然滚动。我现在不知所措，因为我似乎找不到任何真正符合我要求的解决方案。任何帮助都将不胜感激，我将不胜感激

要查看我正在做的示例，请访问。拖动红色框时，黑色对象将四处拖动。我已经在对象的拖动事件上注释掉了我的代码，因为它将完全冻结浏览器，但是，您可以看到我的错误。当物体接近墙壁时，我希望背景水图像可以滚动