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

Posted 2023-05-09

【中文标题】正确地将可拖动元素恢复到其起始位置

【英文标题】：Correctly restore a draggable element to it's starting position

【发布时间】：2021-03-27 12:39:45

【问题描述】：

我在 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，它成功地将元素放置到其原始位置。

【参考方案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)";
;

这解决了问题。