javascript - 可拖动的 div 移动 2px，即使它被捕捉到 10px

Question

以下代码在 400 像素网格内创建一个可拖动的 40 像素矩形(使用 Interact.js ):

HTML:

<div id="app">
  <div class="live-demo">
    <div id="grid-snap"></div>
  </div>
</div>

JS:

var element = document.getElementById('grid-snap')
var x = 0
var y = 0

interact(element)
  .draggable({
    snap: {
      targets: [
        interact.createSnapGrid({ x: 10, y: 10 })
      ],
      range: Infinity,
      relativePoints: [ { x: 0, y: 0 } ]
    },
    restrict: {
      restriction: element.parentNode,
      elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
    }
  })
  .on('dragmove', function (event) {
    x += event.dx;
    y += event.dy;

    event.target.style.webkitTransform =
    event.target.style.transform =
        'translate(' + x + 'px, ' + y + 'px)';
  });

CSS:

.live-demo {
  display: inline-block;
  vertical-align: top;
  width: 400px;
  height: 400px;
  background-color: #e8e9e8;
}

#grid-snap {
  width: 40px;
  height: 40px;
  background-color: #29e;
  color: #fff;
}

由于某种原因，方 block 在第一次被拖动时移动了初始的 2px。当 createSnapGrid() 的 x 和 y 设置为 30px 时，不会发生这种情况。

不确定这是编码问题还是数学问题。如何修改代码(或 CSS)以消除最初的 2px 移动？

JSFiddle: https://jsfiddle.net/nq5zz27j/4/

Answer 1

这与数学有关。当您设置 relativePoint 时，它定义了网格将捕捉到的位置。所以选择 x: 0, Y: 0 将使用对象的左上角。至于为什么 x: .8 和 y: .8 是答案。我没有关于为什么会这样的科学答案(仍在研究那部分)。

但如果你改变

relativePoints: [ { x: 0, y: 0 } ]

到

relativePoints: [ { x: .8, y: .8 } ]

我相信它会满足您的需求。让我知道这是否是您的意思。

jfiddle: https://jsfiddle.net/nq5zz27j/5/