html5 拖拽

浏览数：33 / 时间：2015年06月09日

<!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>