javascript - 如何使用 jquery 创建 move 句柄

Question

这更多是理论类型的问题。

在我的网络应用程序中，我想创建一个用户可以单击的按钮，从而启动一个 move 模式，在此期间(直到释放鼠标)所有鼠标 move 都被转换到某个 DIV 上。

为了更好地理解我的意思，想一个盒子来显示图像的一部分(盒子溢出:隐藏) - 我想让它可以在盒子内四处 move 图像，但不是直接拖动图像，而是通过拖动 handle (拖动时不会 move 的 handle )

在最佳情况下，鼠标光标会在拖动操作打开时隐藏。

我的基本想法是使用可拖动对象，但我不知道如何使其既可访问又不可见。

我将如何使用 javascript/jQuery 完成该操作？

Answer 1

让光标不可见并不难，请参阅 this question 上的前两个答案.

至于句柄，您可以尝试使用 jQuery UI Draggable 的句柄选项。使 handle 看起来静止的关键是有一个看起来像 handle 的单独元素，并将真正的 handle (这将是一个空元素)放在它的顶部。

然后，当 stop() 事件被触发时，您可以将真实句柄放回原来的位置，覆盖假句柄。

因此，在 start() 事件中，您可以将一个类添加到使光标不可见的真实句柄(使用前面提到的帖子中的任一方法)，并在 stop() 事件触发时删除该类, 导致光标重新出现。