How to move elements from one div to another without resetting to original position? (interact.js)

Question

I am using interact.js and am trying to separate the elements into two divs (toolbox and matrix to be solved).

However when I attempt to implement this, if the elements and the matrix are not in the same div then the elements go back to the original position.

I am using the divs for the purposes of styling and want to achieve the following style (the solution would be one customizable div, and the toolbox would be another). Users would drag and drop elements from the toolbox to the solution div (the elements would be cloned so that they do not permanently leave the toolbox div).

Here's my code so far: codesanbox link

Any help would be appreciated. Thank you!

Answer 1

Try to add move listener to clone the element before move by event._interaction conditions.
Something like this

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

Inspired by the old answer Drop and Clone an object using interact.js 2015

Answer 2

You simply have to remove this part:

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

source: https://interactjs.io/docs/restriction/#restrict