Поддержка пользовательских фантомных изображений для HTML5 Drag & Drop в Internet Explorer
В спецификации HTML5 можно сделать элементы перетаскиваемыми. Это не новая информация. Однако, когда вы перетаскиваете что-либо, все, что перетаскивается, является его «призрачным изображением».
Этот образ создается автоматически, поэтому вам не нужно создавать его самостоятельно. Но если требуется пользовательское изображение, можно использовать метод event.DataTransfer.setDragImage() для установки пользовательского изображения, которое будет использоваться.
Изображение обычно представляет собой элемент <image>, но также может быть элементом <canvas> или любым другим элементом изображения. Координаты x и y метода — это смещения, где изображение должно появиться относительно указателя мыши.
void dataTransfer.setDragImage(img, xOffset, yOffset);
Если вы планируете использовать собственное фантомное изображение в своем приложении, вы обнаружите, что Internet Explorer не поддерживает метод setDragImage.
Есть хак, чтобы заставить его работать в Internet Explorer.
Как работает этот хак?
Я заметил, что если вы измените стиль элемента (добавите класс, изменяющий внешний вид) внутри события dragstart, а затем сразу же удалите его в событии setTimeout, Internet Explorer создаст растровую копию измененного элемента и будет использовать ее для перетаскивания. . Итак, на самом деле эта библиотека реализует метод setDragImage, который изменяет стиль целевого элемента, добавляя класс, включающий изображение, которое вы хотите отображать при перетаскивании, а затем удаляет его. Таким образом, браузер отображает временный стиль элемента в виде перетаскиваемого изображения.
