Взаимодействовать. js: Как перетащить объект в несколько зон?

Question

Я пишу небольшую программу перетаскивания и использую для этого interact. js. В программе есть пять зон перетаскивания, и вполне возможно, что один объект можно перетащить в одну из этих зон. Как это возможно? Я выбираю метод appendChild в методах событий, но он работает некорректно.

JS -Code:

const interact = require('interactjs')

const dropZones = document.querySelectorAll('.dropZone')
const draggableObj = document.querySelectorAll('.draggable')


const position = { x: 0, y: 0 }

for(const dropzone of dropZones) 
{

  interact(dropzone).dropzone({ 
  accept: '.draggable',
  overlap: 0.8,
  
  ondropactivate: event => 
  {
    event.preventDefault()
  },

  ondragenter: event => 
  {
    const draggableElement = event.relatedTarget
    const dropzoneElement = event.target 

    event.target.appendChild('draggable')
  },

  ondragleave: event => 
  {
    const draggableElement = event.relatedTarget
    const dropzoneElement = event.target

  },

  ondrop: event => 
  {
    const draggableElement = event.relatedTarget
    const dropzoneElement = event.target 

    event.target.appendChild('draggable')
  },

  ondropactivate: event => 
  {
    const draggableElement = event.relatedTarget
    const dropzoneElement = event.target
    event.target.classList.remove()
  }
  })
}  


for(const draggable of draggableObj)
{
  interact(draggable).draggable({
    inertia: true,
    autoscoll: true,
    modifiers: [
      interact.modifiers.snap({
        targets: [
          interact.createSnapGrid({ x: 10, y: 10 })
        ],
        range: Infinity,
        relativePoints: [ { x: 0, y: 0 } ]
      }),
      interact.modifiers.restrict({
        restriction: 'parent',
        elementRect: { top: 0, left: 0, bottom: 1, right: 1 },
        endOnly: true
      })
    ],
    listeners: { 
      start (event) {
        console.log(event.type, event.target)
      },
      move (event) {
        position.x += event.dx
        position.y += event.dy
  
        event.target.style.transform =
          `translate(${position.x}px, ${position.y}px)`
      }  
    }
  })
}

HTML - Код:

<section class="container-fluid container gesture-area">
        <div class="area">
          <h5><strong>Montag</strong></h5>
          <div class="col col-lg-12 col-12 col-md-12 mt-0 py-2 dropZone" id="montag">  
            <% for(let i = 0; i < tasks.length; i++) { %>
              <% if(tasks[i].day === 'montag' && !(tasks[i].status)){ %>
                <%- include('./card.ejs', {'task' :tasks[i]}) %>
              <%} %>
            <%} %>
          </div>
        </div>
        <div class="area">
          <h5><strong>Dienstag</strong></h5>
          <div class="col col-lg-12 col-12 col-md-12 mt-0 py-2 dropZone" id="dienstag">
            <% for(let i = 0; i < tasks.length; i++) { %>
              <% if(tasks[i].day === 'dienstag' && !(tasks[i].status)){ %>
                <%- include('./card.ejs', {'task':tasks[i]}) %>
              <% } %>
            <%} %>
          </div>
        </div>
        <div class="area">  
          <h5><strong>Mittwoch</strong></h5>
          <div class="col col-lg-12 col-12 col-md-12 mt-0 py-2 dropZone" id="mittwoch">
            <% for(let i = 0; i < tasks.length; i++) { %>
              <% if(tasks[i].day === 'mittwoch' && !(tasks[i].status)){ %>
                <%- include('./card.ejs', {'task':tasks[i]}) %>
              <% } %>
            <% } %> 
          </div>
        </div>
        <div class="area">
          <h5><strong>Donnerstag</strong></h5>
          <div class="col col-lg-12 col-12 col-md-12 mt-0 py-2 dropZone" id="donnerstag">
            <% for(let i = 0; i < tasks.length; i++) { %>
              <% if(tasks[i].day === 'donnerstag' && !(tasks[i].status)){ %>
                <%- include('./card.ejs', {'task':tasks[i]}) %>
              <% } %>
            <% } %>  
          </div>
        </div>
        <div class="area">  
          <h5><strong>Freitag</strong></h5>
          <div class="col col-lg-12 col-12 col-md-12 mt-0 py-2 dropZone" id="freitag">
            <% for(let i = 0; i < tasks.length; i++) { %>
              <% if(tasks[i].day === 'freitag' && !(tasks[i].status)){ %>
                <%- include('./card.ejs', {'task':tasks[i]}) %>
              <% } %>
            <% } %> 
          </div>
        </div>
        <div class="area"> 
          <h5><strong>Erledigt</strong></h5>
          <div id="doneContainer" class="col col-lg-12 col-12 col-md-12 mt-0 py-2 dropZone">
            <% for(let i = 0; i < tasks.length; i++) { %> 
              <% if(tasks[i].status){ %>
                <%- include('./card.ejs', {'task':tasks[i]}) %>
              <% } %> 
            <% } %> 
          </div>
        </div>
      </section>