点击和拖动功能

JavaScript Click and Drag function

本文关键字：功能 拖动      更新时间：2023-09-26

我正在尝试建立一个交互式地图，我正在寻找有关如何在一个窗口中单击和拖动的信息，影响其父窗口中的图像。

因为这很难解释，如果你访问http://liamg.co.uk/map/map.html，你会看到一个小窗口/地图在左上角，我希望能够拖动一个小窗口周围的地图，并有移动较大/放大的图像，这有意义吗?

任何信息/帮助都非常感谢!

jquery支持拖放元素，参见这里:http://jqueryui.com/demos/draggable/你必须设置正确的边界，然后添加一个事件来执行掉落，你将读取掉落元素的位置，然后可以将其应用到地图上，无论你想要什么。

您想要的正确示例是:http://jqueryui.com/demos/draggable/constrain-movement.html

框中的第一个元素具有框的边界。

在这里你可以看到如何对drop做出反应:http://jqueryui.com/demos/draggable/events.html

我认为你需要的不是一个拖动事件，你需要的是一个元素只在小地图内移动，对吧?

让我解释一下:

1-添加一个监听器，鼠标上下移动到小地图;

2-当flag mousedown为true时，mousemove工作改变小地图周围的正方形div的位置(显示用户正在看到的图像的哪一部分)。使用pageX和Y(坐标);

3-根据部分div的大小和大溢出的大小进行数学计算，以显示地图的精确缩放部分。

我相信拖放是真正实现当你移动一个想法在所有的文档，或使用拖放事件。但我就是这么想的

相关文章：