javascript - 如何使用 jquery 创建移动句柄

Question

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

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

为了更好地理解我的意思，请考虑一个显示图像一部分的框（框溢出：隐藏）-我希望可以在框内移动图像，而不是直接拖动图像，但通过拖动手柄代替（拖动时不移动的手柄）

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

我的基本想法是使用可拖动的，但我不知道如何使它可访问但不可见。

我将如何使用 javascript/jQuery 实现这一点？

Answer 1

使光标不可见并不太难，请参阅此问题的前两个答案。

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

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

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

Answer 2

最简单的方法可能是在按钮的单击事件上应用不同的 CSS 样式。

为具有样式和伪类的:hover伪类添加一个类到您的元素（单击时）。一旦用户的鼠标离开可拖动区域，您就可以删除这些样式。cursor: move;cursor: none;:active

单击时，功能可能如下所示：

$('#myButton').click(function(){
   $('#myDraggableElement').addClass('draggable');
});
$('#myDraggableElement').mouseLeave(function(){
   $(this).removeClass('draggable');
});

我是否正确理解了这个问题？