setDragImage не удаляет призрачное изображение в Chrome? - PullRequest
Новая
       24

setDragImage не удаляет призрачное изображение в Chrome?

0 голосов
/ 03 июня 2018

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

Однако Google Chrome не позволяет мне остановить появление изображения-призрака с помощью setDragImage().Пустое изображение создается перед перетаскиванием, и я использую setDragImage() внутри обработчика событий dragstart, поэтому я не вижу, что я делаю неправильно.Призрачное изображение не должно появляться.

Вот пример: 

const blankCanvas = document.createElement('canvas');

document.querySelector('.item')
  .addEventListener('dragstart', (e) => {
    e.dataTransfer.setDragImage(blankCanvas, 0, 0);
  });
.item {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  overflow: hidden;
  margin: 1rem;
  border: 2px solid #fe0000;
  cursor: pointer;
}

.item__img {
  width: 100%;
  height: auto;
}
<div draggable="true" class="item">
  <img src="https://placehold.it/200x200?text=Drag+Me" alt="" class="item__img">
</div>

В Chrome, если вы перетащите рамку с красной рамкой, появится призрачное изображение, хотя я использую setDragImage().На Firefox все работает правильно (а Edge ... даже не имеет этой функции).

Моя версия Chrome - 66.

1 Ответ

0 голосов
/ 03 июня 2018

Проблема исходит от изображения.Если вы попытаетесь перетащить красную рамку, она будет работать правильно.Проблема появится только тогда, когда начинается перетаскивание изображения внутри перетаскиваемого элемента.Возможно, в Chrome есть специальная обработка изображений;Я не знаю.

Вы можете уменьшить это, отключив события указателя на изображении: 

.item img {
  pointer-events: none;
}

Вот рабочий пример: 

const blankCanvas = document.createElement('canvas');

document.querySelector('.item')
  .addEventListener('dragstart', (e) => {
    e.dataTransfer.setDragImage(blankCanvas, 0, 0);
  });
.item {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  overflow: hidden;
  margin: 1rem;
  border: 2px solid #fe0000;
  cursor: pointer;
}

.item__img {
  width: 100%;
  height: auto;
  
  /* The fix */
  pointer-events: none;
}
<div draggable="true" class="item">
  <img src="https://placehold.it/200x200?text=Drag+Me" alt="" class="item__img">
</div>
...