The simplest drag and drop feature with html and JavaScript – 16 lines

The Code:

<!Doctype html>
<head>
<script>
const allowDrop = (e) => e.preventDefault();
const drag = (e) => e.dataTransfer.setData(“text”, e.target.id);
const drop = (e) => {
var data = e.dataTransfer.getData(“text”);
e…

The Code: 

<!Doctype html>
<head>
<script>
const allowDrop = (e) => e.preventDefault();
const drag = (e) => e.dataTransfer.setData("text", e.target.id);
const drop = (e) => {
  var data = e.dataTransfer.getData("text");
  e.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body ondrop="drop(event)" ondragover="allowDrop(event)"
 style="height: 100vh; width: 100vw">

<div ondrop="drop(event)" ondragover="allowDrop(event)"
 style="width:150px; height:50px; padding: 10px; 
border:1px solid black"></div>

<p id="drag" draggable="true" ondragstart="drag(event)">
Drag me into box</p>

</body>
</html>

CodeSandbox URL: https://codesandbox.io/s/drag-and-drop-vky2h?file=/index.html


Print Share Comment Cite Upload Translate Updates
APA

Rajesh Royal | Sciencx (2022-02-05T16:06:58+00:00) The simplest drag and drop feature with html and JavaScript – 16 lines. Retrieved from https://www.scien.cx/2022/02/05/the-simplest-drag-and-drop-feature-with-html-and-javascript-16-lines/

MLA
" » The simplest drag and drop feature with html and JavaScript – 16 lines." Rajesh Royal | Sciencx - Saturday February 5, 2022, https://www.scien.cx/2022/02/05/the-simplest-drag-and-drop-feature-with-html-and-javascript-16-lines/
HARVARD
Rajesh Royal | Sciencx Saturday February 5, 2022 » The simplest drag and drop feature with html and JavaScript – 16 lines., viewed ,<https://www.scien.cx/2022/02/05/the-simplest-drag-and-drop-feature-with-html-and-javascript-16-lines/>
VANCOUVER
Rajesh Royal | Sciencx - » The simplest drag and drop feature with html and JavaScript – 16 lines. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/02/05/the-simplest-drag-and-drop-feature-with-html-and-javascript-16-lines/
CHICAGO
" » The simplest drag and drop feature with html and JavaScript – 16 lines." Rajesh Royal | Sciencx - Accessed . https://www.scien.cx/2022/02/05/the-simplest-drag-and-drop-feature-with-html-and-javascript-16-lines/
IEEE
" » The simplest drag and drop feature with html and JavaScript – 16 lines." Rajesh Royal | Sciencx [Online]. Available: https://www.scien.cx/2022/02/05/the-simplest-drag-and-drop-feature-with-html-and-javascript-16-lines/. [Accessed: ]
rf:citation
» The simplest drag and drop feature with html and JavaScript – 16 lines | Rajesh Royal | Sciencx | https://www.scien.cx/2022/02/05/the-simplest-drag-and-drop-feature-with-html-and-javascript-16-lines/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts