Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Drag and Drop Application Development DnD Tutorial

Published :
Author :
Adam Khoury

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>