Почему может не работать Drag'n'Drop с CSS?

let ball = document.getElementById('ball');

ball.onmousedown = function(event) {

  let shiftX = event.clientX - ball.getBoundingClientRect().left;
  let shiftY = event.clientY - ball.getBoundingClientRect().top;

  ball.style.position = 'absolute';
  ball.style.zIndex = 1000;
  document.body.append(ball);

  moveAt(event.pageX, event.pageY);

  // переносит мяч на координаты (pageX, pageY),
  // дополнительно учитывая изначальный сдвиг относительно указателя мыши
  function moveAt(pageX, pageY) {
    ball.style.left = pageX - shiftX + 'px';
    ball.style.top = pageY - shiftY + 'px';
  }

  function onMouseMove(event) {
    moveAt(event.pageX, event.pageY);
  }

  // передвигаем мяч при событии mousemove
  document.addEventListener('mousemove', onMouseMove);

  // отпустить мяч, удалить ненужные обработчики
  ball.onmouseup = function() {
    document.removeEventListener('mousemove', onMouseMove);
    ball.onmouseup = null;
  };

};

ball.ondragstart = function() {
  return false;
};

.sale div {
  animation: saleTranslate 10s ease-in-out infinite;
  transform: translateZ(0);
  background-repeat: no-repeat;
  background-size: 30vw;
  position: absolute;
  width: 30vw;
  height: 30vw;
  background-size: 30vw;
}

.sale div:nth-child(1) {
  background-image: url(../img/sale/ellipse-red.svg);
  bottom: 8vw;
  left: 30vw;
}

<div class="sale">
  <div id="ball"></div>
  <div>Div-1</div>
  <div>Div-2</div>
  <div>Div-3</div>
  <div>Div-4</div>
  <div>Div-5</div>
  <div>Div-6</div>
  <div>Div-7</div>
  <div>Div-8</div>
  <div>Div-9</div>
  <div>Div-10</div>
  <div>Div-11</div>
</div>