Как перетаскивать картинку из блока в блок?

Question

Как можно перетаскивать картинку из блока в блок?

body {
  background: lightskyblue;
}

.fill {
  background-image: url('https://wdesk.ru/_ph/209/2/68767157.jpg');
  position: relative;
  height: 150px;
  width: 150px;
  top: 5px;
  left: 5px;
}

.box {
  display: inline-block;
  height: 160px;
  width: 160px;
  margin: 10px;
  border: solid 3px royalblue;
  background: white;
}

<div class="box"><div class="fill"></div></div>
<div class="box"></div>
<div class="box"></div>

Answer 1

Нужно ознакомиться с HTML Drag and Drop API

В примере в dataTransfer происходит запись id, который у div с картинкой. Затем в ondrop этот div "перереносится" в новый контейнер через appendChild. Т.е. по факту мы переносим не саму картинку, а только id в текстовом виде.

function allowDrop(e) {
  e.preventDefault();
}

function drag(e) {
  e.dataTransfer.setData("text", e.target.id);
}

function drop(e) {
  e.preventDefault();
  const data = e.dataTransfer.getData("text");
  e.target.appendChild(document.getElementById(data));
}

body {
  background: lightskyblue;
}

.fill {
  background-image: url('https://wdesk.ru/_ph/209/2/68767157.jpg');
  position: relative;
  height: 150px;
  width: 150px;
  top: 5px;
  left: 5px;
}

.box {
  display: inline-block;
  height: 160px;
  width: 160px;
  margin: 10px;
  border: solid 3px royalblue;
  background: white;
}

<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)">
  <div id="draggable" class="fill" draggable="true" ondragstart="drag(event)"></div>
</div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

Answer 2

const fill = document.querySelector('.fill');
const empties = document.querySelectorAll('.box');
fill.addEventListener('dragstart', dragStart);
fill.addEventListener('dragend', dragEnd);
for (const box of empties) {
  box.addEventListener('dragover', dragOver);
  box.addEventListener('dragenter', dragEnter);
  box.addEventListener('dragleave', dragLeave);
  box.addEventListener('drop', dragDrop);
}

function dragStart() {
  this.className += ' hold';
  setTimeout(() => (this.className = 'invisible'), 0);
}

function dragEnd() {
  this.className = 'fill';
}

function dragOver(e) {
  e.preventDefault();
}

function dragEnter(e) {
  e.preventDefault();
  this.className += ' hover';
}

function dragLeave() {
  this.className = 'box';
}

function dragDrop() {
  this.className = 'box';
  this.append(fill);
}

* {
  margin: 0;
  padding: 0;
}

body {
  background: lightskyblue;
}

.box {
  display: inline-block;
  width: 160px;
  height: 160px;
  margin: 10px;
  background: aliceblue;
  border: solid 3px royalblue;
}

.fill {
  position: relative;
  width: 150px;
  height: 150px;
  top: 5px;
  left: 5px;
  cursor: move;
  background-image: url('https://wdesk.ru/_ph/209/2/68767157.jpg');
}

.hover {
  background: lightskyblue;
  border-style: dashed;
}

.hold {
  border: solid 5px #ccc;
}

<div class="box">
  <div class="fill" draggable="true"> </div>
</div>
<div class="box"></div>
<div class="box"></div>

БЛОГ НА HUSL

Как перетаскивать картинку из блока в блок?

Ответы (2 шт):