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

Question

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

下面是我的事件代码

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

我必须 remove/reset data-x 和 data-y 元素的 draggable 属性。

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

这解决了问题。

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

Correctly restore a draggable element to it's starting position

javascript

jquery

dom

ruby-on-rails

interactjs