Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Drag and Drop Application Development DnD Tutorial

Learn how to build a drag and drop applications using JavaScript. We will also teach you how to read the drop zone, that way you can pass the data in the drop zone to your server side or database for saving. Be sure to watch the video to hear related tips and suggestions about developing drag and drop applications.

test.html <!DOCTYPE HTML> <html> <head> <style> .objects { display:inline-block; background-color: #FFF3CC; border: #DFBC6A 1px solid; width: 50px; height: 50px; margin: 10px; padding: 8px; font-size: 18px; text-align: center; box-shadow: 2px 2px 2px #999; cursor: move; } #drop_zone { background-color: #EEE; border: #999 1px solid; width: 280px; height: 200px; padding: 8px; font-size: 18px; } </style> <script> function _(id){ return document.getElementById(id); } var droppedIn = false; function drag_start(event) { _('app_status').innerHTML = "Dragging the "+event.target.getAttribute('id'); event.dataTransfer.dropEffect = "move"; event.dataTransfer.setData("text", event.target.getAttribute('id') ); } function drag_enter(event) { _('app_status').innerHTML = "You are dragging over the "+event.target.getAttribute('id'); } function drag_leave(event) { _('app_status').innerHTML = "You left the "+event.target.getAttribute('id'); } function drag_drop(event) { event.preventDefault(); /* Prevent undesirable default behavior while dropping */ var elem_id = event.dataTransfer.getData("text"); event.target.appendChild( _(elem_id) ); _('app_status').innerHTML = "Dropped "+elem_id+" into the "+event.target.getAttribute('id'); _(elem_id).removeAttribute("draggable"); _(elem_id).style.cursor = "default"; droppedIn = true; } function drag_end(event) { if(droppedIn == false){ _('app_status').innerHTML = "You let the "+event.target.getAttribute('id')+" go."; } droppedIn = false; } function readDropZone(){ for(var i=0; i < _("drop_zone").children.length; i++){ alert(_("drop_zone").children[i].id+" is in the drop zone"); } /* Run Ajax request to pass any data to your server */ } </script> </head> <body> <h2 id="app_status">App status...</h2> <h1>Drop Zone</h1> <div id="drop_zone" ondragenter="drag_enter(event)" ondrop="drag_drop(event)" ondragover="return false" ondragleave="drag_leave(event)" ></div> <div id="object1" class="objects" draggable="true" ondragstart="drag_start(event)" ondragend="drag_end(event)">object 1</div> <div id="object2" class="objects" draggable="true" ondragstart="drag_start(event)" ondragend="drag_end(event)">object 2</div> <div id="object3" class="objects" draggable="true" ondragstart="drag_start(event)" ondragend="drag_end(event)">object 3</div> <hr> <button onclick="readDropZone()">Get Object Data</button> </body> </html>

Nuts and Bolts

DataTransfer - JavaScript Object Functions - JavaScript Functions div - HTML element button - HTML element
thumb

JavaScript Videos

Drag and Drop Programming

Drag and Drop Application Development DnD TutorialFile Upload Drag and Drop Tutorial HTML5 JavaScript PHP