Multi

by djwelsh

HTML

<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<div id="container">
<div class="draggable" data-x-pos="0" data-y-pos="0"> A </div>
<div class="draggable" data-x-pos="0" data-y-pos="0"> B </div>
<div class="draggable" data-x-pos="0" data-y-pos="0"> C </div>
</div>

CSS

#container {
  background-color: #d3f9bc;
  width: 500px;
  height: 400px;
}

.draggable {
  position: absolute;
  touch-action: none;
  user-select: none;
  background-color: #ff000099;
  width: 60px;
  height: 60px;
  outline: 1px dashed red;
}

JavaScript

$(function () {

interact('.draggable').draggable({
	
  inertia: {
    resistance: 30,
    minSpeed: 200,
    endSpeed: 100
  },
  modifiers : [
  	interact.modifiers.restrictRect({
    	restriction : 'parent'
    }),
    interact.modifiers.snap({ 
    	offset : 'parent',
      relativePoints : [{
      	x : 0,
        y : 0
      }],
      targets: [
    		interact.createSnapGrid({
          
          x: 10,
          y: 10
        })
    	] 
    })
  ],
  listeners: {
    start (event) {
    	
    },
    move (event) {
    	
      let position = {
      	x: parseInt(event.target.dataset.xPos), 
        y: parseInt(event.target.dataset.yPos)
      }
      
      position.x += event.dx;
      position.y += event.dy;
      
      

      //event.target.style.transform = `translate(${position.x}px, ${position.y}px)`;
      event.target.style.top = `${position.y}px`;
      event.target.style.left = `${position.x}px`;
      
      event.target.dataset.xPos = position.x;
      event.target.dataset.yPos = position.y;
        
    },
  }
})

let newDiv = document.createElement('div');
	newDiv.className = 'draggable';
  newDiv.dataset.xPos = 0;
  newDiv.dataset.yPos = 0;
  newDiv.innerHTML = 'D';
document.getElementById('container').appendChild(newDiv);

});