sample code Drag and Drop object in html css

Question

Amit Mohanty · Answer

Check this: Drag and Drop Example #dragElement { width: 100px; height: 100px; background-color: blue; color: white; padding: 10px; } #dropZone { width: 200px; height: 200px; background-color: lightgray; margin-top: 20px; text-align: center; padding: 20px; } Drag me! Drop here! const dragElement = document.getElementById('dragElement'); const dropZone = document.getElementById('dropZone'); dragElement.addEventListener('dragstart', dragStart); dropZone.addEventListener('dragover', dragOver); dropZone.addEventListener('drop', drop); function dragStart(event) { event.dataTransfer.setData('text/plain', event.target.id); } function dragOver(event) { event.preventDefault(); } function drop(event) { event.preventDefault(); const data = event.dataTransfer.getData('text/plain'); const element = document.getElementById(data); event.target.appendChild(element); }

Deepak Rawat · Answer

.dragbox { width: 100px; height: 100px; background-color: blue; color: white; text-align: center; line-height: 100px; cursor: move; } .dropzone { width: 300px; height: 300px; border: 2px dashed black; margin-top: 20px; } Drag me function allowDrop(event) { event.preventDefault(); } function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("text"); event.target.appendChild(document.getElementById(data)); }

Vishal Joshi · Answer

Hello Please check the below HTML and CSS code for Drag and Drop. #div1 { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } Drag the W3Schools image into the rectangle: Thanks

Mudzakkir Toha · Answer

what is the purpose of this function? To upload file? As far as I know, there are some libraries which is provide upload functionality using drag n drop file. One of them is jQuery UI. sample code is here: https://sourcecodeaplikasi.info/cara-membuat-fitur-drag-and-drop-file-upload-dengan-php-dan-jquery/ You can also using jQuery library. and using C# for backend. https://makitweb.com/drag-and-drop-file-upload-with-jquery-and-ajax/

sample code Drag and Drop object in html css

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (4)