HTML5拖放

HTML5提供专门的拖拽与拖放的API，他和以前传统的拖放的实现区别是
HTML5的拖放API是支持跨浏览器的，就是你可以将一个浏览器中的对象拖放到另外一个浏览器的元素中
DataTransfer 对象：退拽对象用来传递的媒介，使用一般为Event.dataTransfer。
draggable 属性：就是标签元素要设置draggable=true，否则不会有效果
ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
Event.effectAllowed 属性：就是拖拽的效果。

123

#myDrag {
border:1px solid red;
width:200px;
height:20px;
cursor:move;
}

#trage {
border:1px solid red;
width:300px;
height:200px;
}

.movein {
background:#eee;
}

document.getElementById("myDrag").addEventListener("dragstart", function (evt)
{
    console.log("dragstart");
    evt.effectAllowed = "copy";
    evt.dataTransfer.setData("text/plain", evt.target.textContent);
}, false);
document.getElementById("myDrag").addEventListener("dragend", function (evt)
{
    console.log("dragend");
    document.getElementById("trage").className = null;
}, false);
document.getElementById("trage").addEventListener("dragenter", function (evt)
{
    console.log("dragenter");
    document.getElementById("trage").className = "movein";
}, false);
document.getElementById("trage").addEventListener("dragleave", function (evt)
{
    console.log("dragleave");
    document.getElementById("trage").className = null;
}, false);
document.getElementById("trage").addEventListener("drop", function (evt)
{
    console.log("drop");
    var text = evt.dataTransfer.getData("text/plain");
    document.getElementById("trage").innerHTML = text;
}, false);
document.getElementById("trage").addEventListener("dragover", function (evt)
{
    console.log("dragover");
    evt.dataTransfer.dropEffect = "copy";
    evt.stopPropagation();
    evt.preventDefault();
}, false);