I’m working in a project where I got to move allot of elements, and I have to keep them within the respective border, however my current approach the code allows to move multiple elements at once but it only checks for the one I started the drag on to see if it hits a border, all the others can get outside of it.

onMounted(() => {
  interact('.draggable').draggable({
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true,
      })
    ],
    listeners: {
      move: event => {
        const elements = document.querySelectorAll('.draggable') as NodeListOf<HTMLElement>
        elements.forEach((el: HTMLElement) => {
          const { x: dataX = '0', y: dataY = '0' } = el.dataset

          const x = (parseFloat(dataX) || 0) + event.delta.x
          const y = (parseFloat(dataY) || 0) + event.delta.y

          el.style.transform = `translate(${x}px, ${y}px)`
          Object.assign(el.dataset, { x, y })
        })
      },
      end: () => {
        console.log('test')
      }
    }
  })
})

I tried calculating the container measurements and checking them in the move event which kinda did what it had to , however it first kept teleporting it outside the area and than kinda kept holding those borders