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

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

Однако 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://i.stack.imgur.com/drhx7.png" alt="" class="item__img">
</div>

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

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


javascript google-chrome html drag-and-drop html5-draggable
person Andrew Myers    schedule 02.06.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Проблема исходит из изображения. Если вы попытаетесь перетащить красную рамку, она будет работать правильно. Проблема появится только тогда, когда начнется перетаскивание изображения внутри перетаскиваемого элемента. Возможно, в 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://i.stack.imgur.com/drhx7.png" alt="" class="item__img">
</div>

person Andrew Myers    schedule 02.06.2018
comment
Знаете ли вы, как удалить значок земного шара, который добавляется к курсору в этом примере? Я видел, как некоторые предлагают использовать onmousedown="event.preventDefault()", но это полностью отключает перетаскивание. - person anabella; 12.03.2021
comment
Я не уверен, что вы имеете в виду под значком земного шара. Вы говорите о курсоре «Не разрешено»? Если это так, я не думаю, что есть простой способ изменить это. Я считаю, что курсоры, используемые во время перетаскивания, основаны на платформе. Для пользовательских курсоров вам придется заново реализовать собственное перетаскивание с помощью JavaScript. - person Andrew Myers; 12.03.2021
comment
Этот значок земного шара очень расстраивает - person ness-EE; 22.06.2021
comment
@ness-EE Если вы говорите о курсоре «Не разрешено», я думаю, это означает, что ваша мышь не находится над допустимой целью перетаскивания. Возможно, если бы у вас был контейнер, который является допустимой целью перетаскивания, окружающей изображение, тогда курсор не сразу превратился бы в «Не разрешено». Но это немного выходит за рамки этого вопроса. - person Andrew Myers; 22.06.2021
comment
Нет... Я говорю о значке земного шара --› stackoverflow.com/questions/6771196/ - person ness-EE; 22.06.2021
comment
@ness-EE Я видел этот вопрос, но до сих пор не уверен, что такое глобус. Я использую Chrome, но вижу только курсор Not Allowed. Можешь сделать скриншот или ссылку на картинку? - person Andrew Myers; 22.06.2021
comment
@ness-EE У меня была такая же проблема со значком глобуса (mac + chrome). Решение заключается в том, что холст должен быть частью DOM. Если мы расширим приведенный выше пример до этой строки e.dataTransfer.setDragImage(blankCanvas, 0, 0);, вам понадобится что-то вроде этого: document.body.appendChild(blankCanvas);. Это должно удалить значок глобуса 404 по умолчанию. (Конечно, вы можете удалить элемент BlankCanvas в событии dragend. - person Bálint Réthy; 17.07.2021
comment
@BálintRéthy, это потрясающе - спасибо!! - person ness-EE; 19.07.2021