Question

以下代码在400px网格内创建一个可拖动的40px矩形（使用Interact.js）：

HTML：

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)';
  });

JS：

.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;
}

CSS：

createSnapGrid()

出于某种原因，当第一次拖动时，方块会移动初始的2px。当countries.xml设置为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/

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

1 个答案: