jQuery"；手工工具；图像模拟（只需为我指出正确的方向）

我一直在谷歌搜索，我找不到我要找的东西。我真的不知道这将被称为什么，所以我会尽我所能来描述它。我正在寻找一种在各种图像编辑器中模拟“手动工具”的方法。我想把一个大图像（比如1024x1024）放在一个500x500的div里面。然后，用户就可以用手动工具“抓取”图像并在其周围滚动（想想谷歌地图，但只有一张大图像）。有人知道可以帮助我的教程或插件吗。

提示您可以使用：

外部

DIV

或视图端口需要有

位置：相对和
溢出：隐藏

内部

IMG

（您要用鼠标拖动和移动的那一个）需要有

位置：绝对

移动/平移逻辑如下所示：

• 当用户在IMG上按下鼠标时，设置一个标志，指示移动正在进行

• 当用户将鼠标移动到文档上时-如果设置了移动标志，则根据从回调中接收的事件对象获得的x和y坐标更新IMG的位置（通过更改is style.left和style.top属性）

• 当用户按下或离开鼠标按钮时，将移动标志设置为false

---

这里有一个非常的问题，你可以用它作为一个开始：

我认为它在图像编辑器中通常被称为“平移”工具，在网络上也做类似的事情。我被这个问题的接近投票所吸引，（目前）“太本地化”和“没有建设性”？真正地对我来说似乎很有用，而且，考虑到这是一种似乎被大量使用的技术，它似乎也不符合“过于本地化”的要求。而且，这个问题甚至是以一种人们在互联网上搜索此类事物的逻辑和/或实现示例时必然会发现的方式来表述的。我也不想关闭它。仅供参考，如果你使用jQueryUI，你可以用它来缩短整个过程。您所需要做的就是从img中删除

位置：absolute

，并删除一行JavaScript:

$（'div img'）.draggable（）是的，我试图解释这样的事情背后的逻辑。使用DragTable不仅更简单，而且更安全，因为它已经在所有浏览器中试用过。