<!doctype html>#div1 {width:320px; height:50px; Background:pink;}</style><script>window.onload=function (){ varOdiv = document.getElementById (' Div1 ')); varOul = document.getElementById (' ul1 ')); Odiv.ondragenter=function() {odiv.innerhtml= ' Please release '; } odiv.ondragover=function(EV) {ev.preventdefault (); } Odiv.ondrop=function(EV) {ev.preventdefault (); varFS =Ev.dataTransfer.files; for(vari = 0; i < fs.length; i++) { if(Fs[i].type.indexof (' image ')!=-1) { varFD =NewFileReader (); Fd.readasdataurl (Fs[i]); Fd.onload=function () { varOli = document.createelement (' li '); varoimg = document.createelement (' img '); OIMG.SRC= This. Result; Oli.appendchild (OIMG); Oul.appendchild (Oli); } } Else{alert (' Picture Style · ') }}} Odiv.ondragleave=function() {odiv.innerhtml= ' Please drag to this area '; } }</script>HTML5 Drag and drop