<!DOCTYPE HTML> |
< html > |
< head > |
< style type = "text/css" > |
#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;} |
</ style > |
< script type = "text/javascript" > |
function allowDrop(ev) |
{ |
ev.preventDefault(); |
} |
function drag(ev) |
{ |
ev.dataTransfer.setData("Text",ev.target.id); |
} |
function drop(ev) |
{ |
ev.preventDefault(); |
var data=ev.dataTransfer.getData("Text"); |
ev.target.appendChild(document.getElementById(data)); |
} |
</ script > |
</ head > |
< body > |
< p >请把图片拖放到矩形中:</ p > |
< div id = "div1" ondrop = "drop(event)" ondragover = "allowDrop(event)" ></ div > |
< br /> |
< img width = "480px" height = "65px" id = "drag1" src = "http://images.cnitblog.com/blog/455111/201307/29095547-3d8b20cb3e2b4a18aba5110a1f042fcd.png" draggable = "true" ondragstart = "drag(event)" /> |
</ body > |
</ html > |