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

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

１、HTML5拖放：拖放（Drag和drop）是HTML5的组成部分。
2、拖动开始：ondragstart:调用一个函数，drag（event）,它规定了被拖动的数据。
3、设置拖动数据：setData():设置被拖数据的数据类型和值。
4、放入位置：ondragover事件规定在何处放置被拖动的数据；
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式即：ｅ.preventDefault();
5、放置：ondrop:当放置被拖数据时，会发生drop事件

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"/>

将img拖入任意一个box，并可以来回拖动

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特效应该不会太难了。