Hoping to get some help on drag and copy operation from one contenteditable div to the next. Similar to how you can drag and copy in a spreadsheet. The user should be able to enter some data in the divs and drag and copy it to other div elements.
Got a lot of help on this code from Nippey at this link (but it’s not exactly what I need). HTML5 drag and copy?
Would appreciate any help :).
<!DOCTYPE html>
<html>
<head>
<style>
#div1,
#div2,
#div3 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
cursor: pointer;
}
</style>
<script>
function allowDrop(ev) {
/* The default handling is to not allow dropping elements. */
/* Here we allow it by preventing the default behaviour. */
ev.preventDefault();
}
function drag(ev) {
/* Here is specified what should be dragged. */
/* This data will be dropped at the place where the mouse button is released */
/* Here, we want to drag the element itself, so we set it's ID. */
ev.dataTransfer.setData('text/html', ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData('text/html');
/* If you use DOM manipulation functions, their default behaviour it not to
copy but to alter and move elements. By appending a ".cloneNode(true)",
you will not move the original element, but create a copy. */
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.id = 'newId'; /* We cannot use the same ID */
ev.target.appendChild(nodeCopy);
}
</script>
</head>
<body>
<h2>Drag and Copy</h2>
<p>Drag and Copy Entered Data from one cell to the next.</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" contenteditable="true"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" contenteditable="true"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)" contenteditable="true"></div>
</body>
</html>