最近一直在學習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特效應該不會太難了。