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 margin-bottom: 20px;\n padding: 10px;\n clear: left;\n}\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 cursor: move;\n}\n\n.hover, \n.focus {\n outline: 5px solid rgb(255, 204, 0);\n}\n\n.target {\n outline: 5px solid rgb(204, 0, 0);\n}\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\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 class=\"drop\" dropEffect=\"move\"><\/div>\n <div class=\"drop\" dropEffect=\"copy\"><\/div>\n\n<script>\nfunction cancel(e) {\n if (e.preventDefault) {\n e.preventDefault();\n }\n return false;\n}\n\nfunction addClass(el, c) {\n if (el.className.indexOf(c) == -1) {\n el.className += ' ' + c;\n }\n}\n\nfunction removeClass(el, c) {\n \/\/ posibbly should be a el.className.split(' '), then loop\n \/\/ - but hey, this is just a demo, right?\n var r = new RegExp(' ' + c);\n el.className = el.className.replace(r, '');\n}\n\nvar drop = document.querySelectorAll('.drop');\nvar dragItems = document.querySelectorAll('[draggable=true]');\n\naddEvent(dragItems, 'mouseover', function () {\n addClass(this, 'hover');\n});\n\naddEvent(dragItems, 'mouseout', function () {\n removeClass(this, 'hover');\n});\n\naddEvent(dragItems, 'focus', function () {\n addClass(this, 'focus');\n});\n\naddEvent(dragItems, 'blur', function () {\n removeClass(this, 'focus');\n});\n\naddEvent(dragItems, 'dragstart', function (event) {\n \/\/ via ARIA say the element has been grabbed\n this.setAttribute('aria-grabbed', 'true');\n\n for (var i = 0; i < drop.length; i++) {\n drop[i].tabIndex = 0; \/\/ for keyboard support\n drop[i].setAttribute('aria-dropeffect', 'copy');\n addClass(drop[i], 'target');\n }\n \n \/\/ store the ID of the element, and collect it on the drop later on\n event.dataTransfer.setData('Text', this.id);\n event.dataTransfer.effectAllowed = 'copy';\n});\n\n\/\/ clean up\naddEvent(dragItems, 'dragend', function (event) {\n \/\/ via ARIA say the element has been grabbed\n for (var i = 0; i < drop.length; i++) {\n drop[i].tabIndex = -1; \/\/ for keyboard support\n drop[i].removeAttribute('aria-dropeffect');\n removeClass(drop[i], 'target');\n }\n\n this.setAttribute('aria-grabbed', 'false');\n});\n\nfor (var i = 0; i < dragItems.length; i++) {\n dragItems[i].tabIndex = 0; \/\/ for keyboard support\n dragItems[i].setAttribute('aria-grabbed', 'false'); \/\/ not sure we actually need this now\n}\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 e.dataTransfer.dropEffect = 'copy';\n if (e.preventDefault) {\n e.preventDefault(); \/\/ stops the browser from redirecting off to the text.\n }\n\n this.innerHTML += '<p>' + e.dataTransfer.getData('Text') + '<\/p>';\n return false;\n});\n\n<\/script>\n<\/body>\n<\/html>", javascript : "" };