divs一起拖动，而不是单独拖动

<div class="draggable" draggable="true"></div>
<div class="draggable" draggable="true"></div>
<div class="draggable" draggable="true"></div>

.draggable {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  border: 1px solid #000;
}

var draggables = document.querySelectorAll('.draggable');

draggables.forEach(function(draggable) {
  draggable.addEventListener('dragstart', function(event) {
    event.dataTransfer.setData('text/plain', event.target.id);
  });
});

document.addEventListener('dragover', function(event) {
  event.preventDefault();
});

document.addEventListener('drop', function(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData('text/plain');
  var draggable = document.getElementById(data);
  var offsetX = event.clientX - draggable.getBoundingClientRect().left;
  var offsetY = event.clientY - draggable.getBoundingClientRect().top;
  draggable.style.left = (event.clientX - offsetX) + 'px';
  draggable.style.top = (event.clientY - offsetY) + 'px';
});