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#rem {\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=\"rem\" 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 : "var people = {\n rem : { \n name : \"Remy Sharp\",\n blog : \"http:\/\/remysharp.com\"\n },\n brucel : {\n name : \"Bruce Lawson\",\n blog : \"http:\/\/brucelawson.co.uk\"\n },\n \"Rich_Clark\" : {\n name : \"Rich Clark\",\n blog : \"http:\/\/richclarkdesign.com\/\"\n },\n akamike : {\n name : \"Mike Robinson\",\n blog : \"http:\/\/akamike.net\/\"\n },\n leads : {\n name : \"Tom Leadbetter\",\n blog : \"http:\/\/www.tomleadbetter.co.uk\/\"\n },\n jackosborne : {\n name : \"Jack Osborne\",\n blog : \"http:\/\/jackosborne.co.uk\/\"\n }\n};\n\nfunction 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 return false;\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 (event) {\n if (event.preventDefault) event.preventDefault(); \/\/ stops the browser from redirecting off to the text.\n\n var person = people[event.dataTransfer.getData('Text')];\n\n this.innerHTML += '<p><a href=\"' + person.blog + '\">' + person.name + '<\/a><\/p>';\n return false;\n});" };