Как изменить изображение, перетаскивая другое к нему?

Question

Как изменить изображение, перетаскивая другое к нему?

1

Поэтому я пытаюсь изменить изображение A на изображение B, перетащив изображение B поверх него. Я работал с одной картиной, но хочу, чтобы она работала с несколькими. Это изображение рода фотографии, что я хочу делать.

Что я до сих пор в JS:

function movePlayer1() {
    if (document.getElementById("pack")) {
        document.getElementById("spot1").src = "image/" + playerImg1;
    } else {
        document.getElementById("spot1").src = "image/" + playerImg2;
    }
}
document.querySelectorAll("img#spot1")[0].addEventListener("dragover", movePlayer1);

Я новичок в Javascript, но я пробовал несколько вещей и не мог понять, как это сделать, поэтому я надеюсь, что кто-то может мне помочь в этом. Если мне нужно предоставить дополнительную информацию, пожалуйста, дайте мне знать!

(Когда я перетаскиваю "playerImg2" над document.getElementById("pack"), он по-прежнему изменяется на "playerImg1" вместо "playerImg2".)

Благодарю.

Donsco 26 июнь 2017, в 23:56

Источник

0

Какие ошибки в консоли, когда вы нажмете F12?
mkaatman 26 июнь 2017, в 21:33
0

Не удалось загрузить ресурс: изображение / не определено, сервер ответил со статусом 404 (не найдено)
Donsco 26 июнь 2017, в 21:39
0

Это означает, что playerImg1 не является допустимым изображением :)
Roko C. Buljan 26 июнь 2017, в 21:40
0

проверьте ваш путь или дважды проверьте, что playerImg1 и playerImg2 действительны.
Yumiko 26 июнь 2017, в 21:42
0

Но playerImg1 - это тот, который работает, а другой на самом деле нет
Donsco 26 июнь 2017, в 21:42
0

Когда я использую playerImg2 только сам по себе, это работает, однако проблема в том, что когда у меня есть несколько, я не знаю правильный код, чтобы изменить его на любой. Поэтому, когда я перетаскиваю playerImg2 поверх меняющегося изображения, оно все равно меняется на playerImg1 ...
Donsco 26 июнь 2017, в 21:44

Показать ещё 4 комментария

Теги:

javascript

function

image

draggable

1 ответ

Ещё вопросы

Какие ошибки в консоли, когда вы нажмете F12?
Не удалось загрузить ресурс: изображение / не определено, сервер ответил со статусом 404 (не найдено)
Это означает, что playerImg1 не является допустимым изображением :)
проверьте ваш путь или дважды проверьте, что playerImg1 и playerImg2 действительны.
Но playerImg1 - это тот, который работает, а другой на самом деле нет
Когда я использую playerImg2 только сам по себе, это работает, однако проблема в том, что когда у меня есть несколько, я не знаю правильный код, чтобы изменить его на любой. Поэтому, когда я перетаскиваю playerImg2 поверх меняющегося изображения, оно все равно меняется на playerImg1 ...

Roko C. Buljan · Accepted Answer · 2017-06-26T21-05-00.000Z

Используйте фоновое изображение для ваших областей сбрасывания,
и играть с перетаскиванием ваших изображений:

const isClass = (cl, el) => el.classList.contains(cl);
const on = (typ, el, cb) => el.addEventListener(typ, cb);
let dragEl;

on("dragover",  document, (e) => e.preventDefault() );
on("dragend",   document, (e) => e.target.style.opacity = 1 );
on("dragstart", document, (e) => {
  dragEl = e.target;
  e.target.style.opacity = 0;
});
on("drop", document, (e) => {
  e.preventDefault();
  if(isClass("dropArea", e.target)) {
    dragEl.remove();
    e.target.append( dragEl );
  }
});

.dropArea {
  display:inline-block; vertical-align:middle;
  width: 57px; height: 87px; margin: 8px;
  background: url('https://i.stack.imgur.com/5nsDs.png') no-repeat 50% 50% / cover;
}
.dropArea.small{
  width:  30px; height: 40px;
}
.dropArea img{
  width: 100%; height: 100%;
  transition: 0.3s;
}

<div class="dropArea"><img src="https://i.stack.imgur.com/sBQ1c.png" draggable="true"></div>
<div class="dropArea"><img src="https://i.stack.imgur.com/kR6MI.png" draggable="true"></div>
<div class="dropArea"><img src="https://i.stack.imgur.com/XSBBq.png" draggable="true"></div>
<div class="dropArea small"></div>
<div class="dropArea small"></div>
<div class="dropArea small"></div>

Большое вам спасибо, человек! Это именно то, что мне было нужно! :)