Basic Drag and Drop<\/title>\n<style>\n#drop {\n min-height: 100px;\n width: 200px;\n border: 3px dashed #ccc;\n margin: 10px;\n padding: 10px;\n}\np {\n margin: 3px 0;\n}\n<\/style>\n<script src=\"http:\/\/html5demos.com\/h5utils.js\"><\/script>\n<\/head>\n<body>\n <img src=\"http:\/\/twivatar.org\/rem\" alt=\"Remy Sharp\" \/>\n <img src=\"http:\/\/twivatar.org\/brucel\" alt=\"Bruce Lawson\" \/>\n <img src=\"http:\/\/twivatar.org\/Rich_Clark\" alt=\"Rich Clark\" \/>\n <div id=\"drop\"><\/div>\n<\/body>\n<\/html>", javascript : "function cancel(e) {\n if (e.preventDefault) {\n e.preventDefault();\n }\n return false;\n}\n\nvar drop = document.querySelector('#drop');\n\n\/\/ Tells the browser that we *can* drop on this target\naddEvent(drop, 'dragover', cancel);\naddEvent(drop, 'dragenter', cancel);\n\naddEvent(drop, 'drop', function (e) {\n if (e.preventDefault) e.preventDefault(); \/\/ stops the browser from redirecting off to the text.\n\n this.innerHTML += '<p>' + e.dataTransfer.getData('Text') + '<\/p>';\n return false;\n});" };