Draggable Elements

Draggable and editable text and image

by tymek04

HTML

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="drop-box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="text" ondrop="drop(event)" draggable="true" ondragstart="drag(event)" contenteditable="false">Aby mnie edytować naciśnij guzik</div>
<img id="img" src="https://bit.ly/2M73DFS" draggable="true" ondragstart="drag(event)" width="336" height="69">
<button id="confirm-edit">
Edytuj/Zapisz
</button>
</body>
</html>

CSS

#drop-box {
  width: 350px;
  height: 250px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

JavaScript

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

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

let dropBox = document.getElementById('drop-box');
dropBox.addEventListener('dragover', function(event){
allowDrop(event);
})

dropBox.addEventListener('drop', function(event){
drop(event);
})


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




let img = document.getElementById('img'),
text = document.getElementById('text');

[img, text].forEach(el => el.addEventListener('dragstart', function(event){
drag(event);
}));

function toggleTextEdit(){
text.contentEditable = text.contentEditable == "true" ? "false" : "true";
}

document.getElementById('confirm-edit').addEventListener('click', toggleTextEdit);