HTML5 drag and drop баг в chrome

115

04 февраля 2021, 06:50

Я обнаружил странное поведение перетаскиваемой картинки в Chrome, тогда как в FIREFOX все работает отлично. Дело в том что при использовании метода e.dataTransfer.setDragImage(e.target, e.target.width / 2, e.target.height / 2); в chrome захватывается не только картинка, а еще и задний фон. Посмотрите демонстрацию бага:

const onDragStart = (e) => { 
  e.dataTransfer.effectAllowed = "move"; 
  e.dataTransfer.setDragImage(e.target, e.target.width / 2, e.target.height / 2); 
}; 
     
     
const onDragLeave = (e) => { 
    e.preventDefault(); 
}; 
 
const onDragOver = (e) => { 
    e.preventDefault(); 
}; 
 
 
document.addEventListener("dragstart", onDragStart, false); 
document.addEventListener("dragover", onDragOver, false); 
document.addEventListener("dragleave", onDragLeave, false);

.box { 
  width: 80px; 
  height: 80px; 
  background: linear-gradient(45deg, rgba(255,0,255,1) 0%, rgba(0,255,255,1) 100%); 
  padding: 10px; 
} 
 
.img { 
  width: 100%; 
}

<div class="box" draggable="false"> 
  <img draggable="true" class="img" src="https://images.emojiterra.com/twitter/v12/512px/1f914.png"/> 
</div>

Как мне решить проблему? В моем проекте метод setDragImage важен и без его использования решения я не рассматриваю.

Answer 1

Ну прям багом это не назвать, особенность реализации =), помогает не брать изображения из DOM, а например создать новое при старте перетаскивания или заранее.

Однако это порождает другую проблему - хватается картинка оригинального размера, и если это критично то это обходить уже проблематично(при помощи канвы), но можно, если это интересно могу дополнить ответ.

Однако проще подобрать размеры заранее...

img.addEventListener("dragstart", e => { 
  let img = document.createElement('img') 
  img.src = e.target.src 
  e.dataTransfer.setDragImage(img, img.width / 2, img.height / 2); 
});

.box { 
  width: 80px; 
  height: 80px; 
  background: linear-gradient(45deg, rgba(255,0,255,1) 0%, rgba(0,255,255,1) 100%); 
  padding: 10px; 
} 
 
.img { 
  width: 100%; 
}

<div class="box"> 
  <img id="img" draggable="true" class="img" src="https://images.emojiterra.com/twitter/v12/512px/1f914.png"/> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

Подробнее о сайте site-vizitka-kiev.org.ua

ТОП-10

Все популярные вопросы

HTML5 drag and drop баг в chrome

Добавление API в C#

Как ограничить угол наклона объекта в Unity?

Привязка видимости CheckBox к свойству IsSelected элемента в списке

C# MapCamera : Singleton<MapCamera> выдает ошибку