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 [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Проблема исходит из изображения. Если вы попытаетесь перетащить красную рамку, все будет работать правильно. Проблема появится только тогда, когда начнется перетаскивание изображения внутри перетаскиваемого элемента. Возможно, в 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>Я не совсем понимаю, что вы подразумеваете под "значком земного шара". Вы про курсор Not Allowed? Если так, то я не думаю, что есть простой способ изменить это. Я считаю, что курсоры, используемые при перетаскивании, основаны на платформе. Для пользовательских курсоров вам придется заново реализовать собственное перетаскивание с помощью JavaScript.
Этот значок земного шара очень расстраивает
@ ness-EE Если вы говорите о запрещенном курсоре, я думаю, это означает, что ваша мышь не находится над допустимой целью перетаскивания. Может быть, если бы у вас был контейнер, который является допустимой целью перетаскивания, окружающий изображение, тогда курсор не сразу превратился бы в Not Allowed. Но это немного выходит за рамки этого вопроса.
Неа ... Я про значок глобуса -> stackoverflow.com/questions/6771196/…
@ ness-EE Я видел этот вопрос, но все еще не уверен, что такое земной шар. Я использую Chrome, но вижу только курсор "Не разрешен". Вы можете сделать снимок экрана или ссылку на изображение?
Вы знаете, как удалить значок глобуса, который добавляется к курсору в этом примере? Я видел, как некоторые предлагали использовать
onmousedown = "event.preventDefault()", но это полностью отключает перетаскивание.