如何在不重置為原始 position 的情況下將元素從一個 div 移動到另一個？ (interact.js)

Question

我正在使用interact.js，並試圖將元素分成兩個div（要解決的工具箱和矩陣）。

但是，當我嘗試實現這一點時，如果元素和矩陣不在同一個 div 中，則元素 go 會回到原來的 position。

我將 div 用於樣式設置並希望實現以下樣式（解決方案將是一個可自定義的 div，而工具箱將是另一個）。 用戶可以將元素從工具箱拖放到解決方案 div（這些元素將被克隆，這樣它們就不會永久離開工具箱 div）。

到目前為止，這是我的代碼： codesanbox 鏈接

任何幫助，將不勝感激。 謝謝！

Answer 1

嘗試在按event._interaction條件移動之前添加move偵聽器以克隆元素。
像這樣的東西

function dragMoveListener(event) {
  var target = event.target,
    // keep the dragged position in the data-x/data-y attributes
    x = (parseFloat(target.getAttribute("data-x")) || 0) + event.dx,
    y = (parseFloat(target.getAttribute("data-y")) || 0) + event.dy;

  // translate the element
  target.style.webkitTransform = target.style.transform =
    "translate(" + x + "px, " + y + "px)";

  // update the posiion attributes
  target.setAttribute("data-x", x);
  target.setAttribute("data-y", y);
}

/* The dragging code for '.draggable' from the demo above
 * applies to this demo as well so it doesn't have to be repeated. */

// enable draggables to be dropped into this
interact(".dropzone").dropzone({
  // only accept elements matching this CSS selector
  accept: ".yes-drop",
  // Require a 75% element overlap for a drop to be possible
  overlap: 0.75,

  // listen for drop related events:

  ondropactivate: function (event) {
    // add active dropzone feedback
    event.target.classList.add("drop-active");
  },
  ondragenter: function (event) {
    var draggableElement = event.relatedTarget;
    var dropzoneElement = event.target;

    // feedback the possibility of a drop
    dropzoneElement.classList.add("drop-target");
    draggableElement.classList.add("can-drop");
    // draggableElement.textContent = "Dragged in";
  },
  ondragleave: function (event) {
    // remove the drop feedback style
    event.target.classList.remove("drop-target");
    event.relatedTarget.classList.remove("can-drop");
    //Remove cloned element if leave
    //event.relatedTarget.remove();
  },
  ondrop: function (event) {
    // event.relatedTarget.textContent = "Dropped";
  },
  ondropdeactivate: function (event) {
    // remove active dropzone feedback
    event.target.classList.remove("drop-active");
    event.target.classList.remove("drop-target");
  }
});

interact(".drag-drop").draggable({
  inertia: true,
  modifiers: [
    interact.modifiers.restrictRect({
      // restriction: "parent",
      endOnly: true
    })
  ],
  autoScroll: true,
  // dragMoveListener from the dragging demo above
  listeners: { move: dragMoveListener }
}).on('move', function (event) {
  
  var interaction = event._interaction;
  if (interaction.pointerIsDown && !interaction.interacting() && event.currentTarget.getAttribute('clonable') !== 'false'){
    var original = event.currentTarget;
    var clone = event.currentTarget.cloneNode(true);
    
    clone.setAttribute('clonable','false');
    clone.style.position = "absolute";
    clone.style.left = original.offsetLeft+"px";
    clone.style.top = original.offsetTop+"px";
    original.parentElement.appendChild(clone);
    interaction.start({ name: 'drag' },event.interactable,clone);
  }
 
});

受舊答案的啟發Drop and Clone an object using interact.js 2015

Answer 2

您只需刪除此部分：

modifiers: [
    interact.modifiers.restrictRect({
        // restriction: "parent",
        endOnly: true
    })
]

來源： https://interactjs.io/docs/restriction/#restrict