html5实现图片任意拖放及本地图片拖放预览特效解析

    最近一直在学习html5，对于图片在两个div内任意拖放感觉特别炫，扩展一下做一些特效应该很不错，而且还可以实现本地图片的拖拽上传功能，下面对上述两个功能做一个代码的解析：
**

1.图片随意拖放到多个区域

HTML代码:

//简单设置样式
    <style type="text/css"> .Box{ float:left; width:400px; height:400px; BACkground-color: #ccc; } #Box2{ BACkground-color: red; } </style>
    <div id="Box1" class="Box"></div>
    <div id="Box2" class="Box"></div>
    <img src="images/1.jpg" id="img"/>

js代码：

var BoxDiv,Box2Div,msgDiv,img1;
    window.onload = function(){
        BoxDiv=document.getElementById("Box1");
        Box2Div=document.getElementById("Box2");
        //若允许被放置元素，必须阻止其默认的处理方式
        BoxDiv.ondragover=function(E){
            //盒子１
            e.preventDefault();
        }
        Box2Div.ondragover=function(E){
            //盒子２
            e.preventDefault();
        }
        //规定了被拖动的数据
        img1.ondragstart=function(E){
            e.dataTransfer.setData("imgId","img1");
        }
        //当放置被拖数据时 发生的事件
        BoxDiv.ondrop=dropImghandler;
        Box2Div.ondrop=dropImghandler;
    }
    //封装图片拖拽的处理事件
    function dropImghandler(E){
        e.preventDefault();
        //取到数据，放在相应的位置
        var img1=document.getElementById(e.dataTransfer.getData("imgId"));
        e.target.appendChild(img1);//e.target获取指定目标源
    }

２．本地图片资源拖拽上传

HTML代码：

<style type="text/css"> #imgContainer{ width:400px; height:400px; BACkground-color: #ccc; } </style>
<div id="imgContainer"></div>

js代码：

var imgContainer;
window.onload=function(){
    imgContainer=document.getElementById("imgContainer");
     //若允许被放置元素，必须阻止其默认的处理方式
    imgContainer.ondragover= function (E) {
        e.preventDefault();
    }
    //监听拖拽的事件：设置 允许拖拽
    imgContainer.ondrop=function(E){
        e.preventDefault();
        //创建file对象
        var f= e.dataTransfer.files[0];
        //创建fileReader 来读取信息
        var fileReader=new FileReader();
        //通过fileReader 来读取数据
        fileReader.readAsDataURL(f);
        //通过fileReaderl 来监听它的的事件
        fileReader.onload=function(E){
        //在盒子中写入一个img标签，并将其读到的资源赋给src实现预览
            imgContainer.innerHTML="<img src='"+fileReader.result+"' width='300px' height='300px' />";
        }

    }
}

      这两个基本功能的实现， 再在后期自己扩展做一些html5特效应该不会太难了。