Я пытаюсь перетащить изображение на веб-странице из одного раздела в другой, используя метод, описанный в https://www.w3schools.com/html/html5_draganddrop.asp.
Демонстрация в w3schools работает отлично, но когда Я пытаюсь реализовать это на своей собственной веб-странице, я не могу получить идентификатор изображения в событии, я просто получаю атрибут sr c для изображения.
Моя страница создается динамически с помощью сценария java.
На изображениях у меня есть событие перетаскивания, вызывающее
function drag(ev) {
console.log("Dragging");
ev.dataTransfer.setData("text/plain", ev.target.id);
console.log(ev.target.id);
}
Падение
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text/plain");
console.log(data);
ev.target.appendChild(document.getElementById(data));
}
Я вижу в консоли на firefox, что он вызывается, но я никогда не получаю 2-й console.log, так как меня останавливает «NoModificationAllowedError: изменения не допускаются для этого документа», когда я пытаюсь сделать setData.
Если я запускаю его на chrome, я не получаю сообщение об ошибке, и мне распечатывается target.id, но я все еще получаю атрибут sr c и тогда конечно getElementById завершается неудачей.
Есть идеи, что происходит?
(Написание этого я делаю (как я часто это делаю, когда пишу сообщение StackOverflow), вижу обходной путь. Я могу go просмотреть все изображения в моем документе и найти изображение с правильным sr c или сохраните идентификатор где-нибудь еще в моем скрипте html или java, но мне бы хотелось, чтобы это работало правильно, и я не понимаю, почему он не работает на моей веб-странице, когда работает в примере)