html5 拖拽 - 爱码网

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{
    width:320px;
    height:50px;
    background:pink;}
</style>
<script>

window.onload = function ()
{
    var odiv = document.getElementById(\'div1\');
    var oul = document.getElementById(\'ul1\');
    
    odiv.ondragenter = function ()
    {
        odiv.innerHTML = \'请释放\';
    }
    
    odiv.ondragover = function (ev)
    {
        ev.preventDefault();
    }
    
    odiv.ondrop = function (ev)
    {
        ev.preventDefault();
        
        var fs = ev.dataTransfer.files;
        
        for(var i = 0; i < fs.length; i++)
        {
            
            if(fs[i].type.indexOf(\'image\')!=-1)
            {
                var fd = new FileReader();
                fd.readAsDataURL(fs[i]);
                
                fd.onload = function ()
                {
                    var oli = document.createElement(\'li\');
                    var oimg = document.createElement(\'img\');
                    
                    oimg.src = this.result;
                    
                    oli.appendChild(oimg);
                    oul.appendChild(oli);
                }
            }
            
            else
            {
                alert(\'图片样式·\')
            }
            
        }
    }
    
    odiv.ondragleave = function ()
    {
        odiv.innerHTML = \'请拖拽到此区域\';
    }
    
}
</script>
</head>

<body>

<div id="div1">请拖拽到此区域</div>

<ul id="ul1"></ul>
</body>
</html>