HTML5简单的拖拽实现

1.HTML5拖放：

      拖放（Drag和drop）是HTML5标准的组成部分

2.拖动开始：

    ondragstart:调用了一个函数，drag(event),它规定了被拖动的数据

3.设置拖动数据

   ondragover:时间规定在何处被拖动的数据

4.放置：

    ondrop:当放置被拖数据时，会发生drop事件

<span style="font-size:14px;">/**
 * Created by Administrator on 2014/12/1.
 */
var box1Div,box2Div,box3Div,msgDiv,img1;

window.οnlοad=function() {
    box1Div = document.getElementById("box1");
    box2Div = document.getElementById("box2");
    box3Div = document.getElementById("box3");
    msgDiv = document.getElementById("msg");
    img1 = document.getElementById("img1");

//    box1Div.οndragenter=function(e){
//        showObj(e);
//
//    }
    box1Div.ondragover = function (e) {
        e.preventDefault();
    }
    box2Div.ondragover = function (e) {
        e.preventDefault();
    }
    box3Div.ondragover = function (e) {
        e.preventDefault();
    }

    img1.ondragstart = function (e) {
        e.dataTransfer.setData("imgId", "img1");
    }


    box1Div.ondrop =dropImghandler;
    box2Div.ondrop =dropImghandler;
    box3Div.ondrop =dropImghandler;
}

function dropImghandler(e) {
    showObj(e.dataTransfer);
    e.preventDefault();

    var img=document.getElementById(e.dataTransfer.getData("imgID"));
    e.target.appendChild(img);
}
在msg的div中打印出拖拽时图片的信息
function showObj(obj){
    var s="";
   for(var k in obj){
        s+=k+":"+obj[k]+"</br>"
    }

    msgDiv.innerHTML=s;</span>
}