锁定/重力放入较大容器内的内部div

Question

我目前正在开发一个自定义组件，可以让您选择与不同时间值对应的不同点。以下是一些示例代码：

<div class="shell">
  <div class="indicator"></div>
  <div class="indicator"></div>
  <div class="indicator"></div>
</div>

.shell {
  background-color: #DCDCDC;
  border-radius: 20px;
  display: inline-flex;
}

.indicator {
  background-color: #3CB371;
  border-radius: 50%;
  height: 15px;
  margin: 2px 5px;
  width: 15px;
}

.indicator:hover {
  background-color: white;
}

var shell = document.querySelector('.shell');

shell.addEventListener('click', function(event) {
  if (event.path && event.path[0].classList.value === 'indicator') {
    console.log(event);
  }
});

这看起来像：

我想知道是否有可能编写一些JS，它可以让我的鼠标锁定到每个单独的圆圈中。有点像在PhotoShop中打开网格时，你的鼠标会被吸引到这些点并锁定。

理想情况下，我可以锁定每个圈子的中心点。

谢谢！

Answer 1

我猜这个鼠标移动的词通常被称为＆＃34; snap＆＃34;。

要使用JavaScript实现这一点，您必须能够操纵用户鼠标位置。据我所知，这是不可能的。

考虑一下这种能力带来的可用性问题。例如，它可能会带来安全问题，因为当您尝试单击页面上的其他位置时，访问过的页面可能会将鼠标指向恶意链接。