Предотвратить призрачное изображение при перетаскивании элементов, не перетаскиваемых?

Я создаю веб-сайт, который использует API перетаскивания HTML5.

Однако, чтобы увеличить пользовательский интерфейс, я хотел бы предотвратить появление призрачных изображений, когда пользователь перетаскивает неперетаскиваемые элементы. Возможно ли это?

Кроме того, почти каждый элемент кажется " draggable " по умолчанию. Можно щелкнуть, а затем быстро перетащить практически любой элемент в браузере, который создает изображение-призрак вместе с курсором no-drop. Есть ли способ предотвратить это поведение?

  • draggable="false" не работает.
  • user-select: none не работает.
  • pointer-events: none не работает.
  • event.preventDefault() on mousedown не работает.
  • event.preventDefault() on dragstart тоже не работает.

У меня нет идей, и до сих пор было невероятно сложно найти информацию об этом онлайн. Я нашел следующий поток, но, опять же, draggable="false", похоже, не работает в моем случае.

Ниже приведен снимок экрана, демонстрирующий, что он не работает; конечно, вы не можете видеть мой курсор на скриншоте, но вы можете видеть, как я перетащил числа влево, несмотря на это.

введите описание изображения здесь

Я полагаю, что проблема может иметь какое-то отношение к ее родительскому объекту, имеющему связанные с ним события dragover и drop. Тем не менее я все еще ошеломлен.

HTML

...
<body>
  ...
  <div id="backgammon-board-container">
    <div class="column" id="left-column">
      <div class="quadrant" id="third-quadrant">
        <div class="point odd top-point" id="point-13-12"><text>13</text>
          <div class="checker player-one-checker" id="checker-03" draggable="true"></div>
        </div>
      </div>
    </div>
    ...
  </div>
</body>
</html>

CSS

#backgammon-board-container {
  height: 100vh;
  width: 60vw;
  position: absolute;
  right: 0;
  display: flex;
}

  .column {
    height: 100%;
    display: flex;
    flex-direction: column; /* column-reverse for player two perspective */
  }

  #left-column {
    flex: 6;
  }

    .quadrant {
      flex: 1;
      display: flex;
    }

      .point {
        flex: 1;
        padding: 10px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

        .checker {
          z-index: 1;
          width: 48px;
          height: 48px;
          border-radius: 50%;
        }

text {
  position: fixed;
  font-family: impact;
  font-size: 24px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;

  user-select: none;
  pointer-events: none;
}

JS

const p1checkers = document.getElementsByClassName('player-one-checker');
const p2checkers = document.getElementsByClassName('player-two-checker');
const pointClass = document.getElementsByClassName('point');

function setTurn(player) {
  if (player === 'p1') {
    allowCheckerMovement = p1checkers;
    disallowCheckerMovement = p2checkers;
  } else {
    allowCheckerMovement = p2checkers;
    disallowCheckerMovement = p1checkers;
  }

  // enable checker control for player
  for (var i = 0; i < allowCheckerMovement.length; i++) {
    allowCheckerMovement[i].style.cursor = 'pointer';
    allowCheckerMovement[i].setAttribute('draggable', true);
    allowCheckerMovement[i].addEventListener('dragstart', start); // for drag-and-drop.js
    allowCheckerMovement[i].addEventListener('dragend', stop);    // for drag-and-drop.js
  }

  // disable checker control for player
  for (var i = 0; i < disallowCheckerMovement.length; i++) {
    disallowCheckerMovement[i].style.cursor = 'default';
    disallowCheckerMovement[i].setAttribute('draggable', false);
    disallowCheckerMovement[i].removeEventListener('dragstart', start); // for drag-and-drop.js
    disallowCheckerMovement[i].removeEventListener('dragend', stop);    // for drag-and-drop.js
  }

  // allow drag and drop
  for (var i = 0; i < pointClass.length; i++) {
    pointClass[i].addEventListener('dragover', allowDrop); // for drag-and-drop.js
    pointClass[i].addEventListener('drop', droppedOn);     // for drag-and-drop.js
  }
}

function start(event) {
  var checker = event.target;
  event.dataTransfer.setData('text/plain', checker.id);
  event.dataTransfer.effectAllowed = 'move';
  window.requestAnimationFrame(function(){
    checker.style.visibility = 'hidden';
  });
}

function allowDrop(event) {
  event.preventDefault();
}

function droppedOn(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData('text/plain');
    event.target.appendChild(document.getElementById(data));
}

function stop(event){
  var element = event.srcElement;
  window.requestAnimationFrame(function(){
    element.style.visibility = 'visible';
  });
}

ОТВЕТЫ