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 clear: left;\n}\np {\n margin: 3px 0;\n}\n#remy {\n background: url(http:\/\/twivatar.org\/rem) no-repeat;\n}\n#brucel {\n background: url(http:\/\/twivatar.org\/brucel) no-repeat;\n}\n#Rich_Clark {\n background: url(http:\/\/twivatar.org\/Rich_Clark) no-repeat;\n}\n#leads {\n background: url(http:\/\/twivatar.org\/leads) no-repeat;\n}\n#akamike {\n background: url(http:\/\/twivatar.org\/akamike) no-repeat;\n}\n#jackosborne {\n background: url(http:\/\/twivatar.org\/jackosborne) no-repeat;\n}\n.drag {\n height: 48px;\n width: 48px;\n float: left;\n -khtml-user-drag: element;\n margin: 10px;\n}\n<\/style>\n<script src=\"http:\/\/html5demos.com\/h5utils.js\"><\/script>\n<\/head>\n<body>\n <div class=\"drag\" id=\"remy\" draggable=\"true\"><\/div>\n <div class=\"drag\" id=\"brucel\" draggable=\"true\"><\/div>\n <div class=\"drag\" id=\"Rich_Clark\" draggable=\"true\"><\/div>\n <div class=\"drag\" id=\"leads\" draggable=\"true\"><\/div>\n <div class=\"drag\" id=\"akamike\" draggable=\"true\"><\/div>\n <div class=\"drag\" id=\"jackosborne\" draggable=\"true\"><\/div>\n \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 dragItems = document.querySelectorAll('[draggable=true]');\n\nfor (var i = 0; i < dragItems.length; i++) {\n addEvent(dragItems[i], 'dragstart', function (event) {\n \/\/ store the ID of the element, and collect it on the drop later on\n event.dataTransfer.setData('Text', this.id);\n });\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});" };