正确地将可拖动元素恢复到其起始位置

Question

我在 Rails 6 应用程序中使用 InteractJs library。我已经实现了它的拖放事件。
拖放功能运行良好。我面临的问题是，如果我将一个元素从 dropzone 中删除并将其放置到它的原始（起始）位置，它就会被定位在那里，但是如果我尝试再次拖动该元素，它会出现在前一个元素的位置拖动结束而不是恢复到哪里，这是我要解决的问题

以下是我的事件代码

var dragMoveListener = function (event) {
  var target, x, y;
  target = event.target;
  x = (parseFloat(target.getAttribute("data-x")) || 0) + event.dx;
  y = (parseFloat(target.getAttribute("data-y")) || 0) + event.dy;
  target.style.webkitTransform = target.style.transform =
    "translate(" + x + "px, " + y + "px)";
  target.setAttribute("data-x", x);
  return target.setAttribute("data-y", y);
};

window.dragMoveListener = dragMoveListener;

interact('*[data-draggable="true"]').draggable({
  inertia: false,
  autoScroll: true,
  onmove: dragMoveListener,
});

const restoreToOriginalPosition = (event) => {
  // this restores the element to it's original position but the next time I attempt to drag it, it appears on the position where the previous dragging ended
  event.relatedTarget.style.transform = "translate(0px, 0px)";
};

$(document).on("turbolinks:load", function () {
  interact("#dropzone").dropzone({
    accept: '*[data-draggable="true"]',
    overlap: 0.75,

    ondropactivate: function (event) {
      // ...
    },

    ondrop: function (event) {
      const product_id = event.relatedTarget.attributes["data-product-id"].value;
      // my use case is to remove the element from DOM if it's dropped into the dropzone, otherwise restore to it's starting position
      $(event.relatedTarget).remove();
      addToCart(product_id); //it's definition is not relevant here
    },

    ondropdeactivate: function (event) {
      restoreToOriginalPosition(event);
    },
  });
});

在ondrop 事件监听器中，我尝试将元素恢复到它在页面上的原始位置。请参阅函数restoreToOriginalPosition，它成功地将元素放置到其原始位置。

Answer 1

我必须删除/重置 draggable 元素的 data-x 和 data-y 属性。

const restoreToOriginalPosition = (event) => {
  event.relatedTarget.removeAttribute("data-x");
  event.relatedTarget.removeAttribute("data-y");
  event.relatedTarget.style.transform = "translate(0px, 0px)";
};

这解决了问题。