要接受元素的放下，目标元素必须监听至少3个事件：

  （1） 首先是dragenter事件，用来决定是否接受“拖动的元素”被放下，如果接受放下，那么该事件就被取消，进入下一个事件

   （2）然后开始dragover事件，用来确定给用户什么样的反馈，即位于该元素之上时呈现什么样的效果，如果该事件被取消，反馈一般是一个鼠标指针，

 也可以使用dropEffect属性定义，如果事件没有被取消，那么就是默认的行为，默认的行为一般就是什么也不做。

    （3）最后是drop事件，也就是实际将执行的放下动作，这个事件也需要被取消，这样dropEffect属性的设置就可以被使用


<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>范例——拖放</title>
<style>
body {
    font-family: 'Microsoft YaHei';
}
div.drag {
    background-color:#AACCFF;
    border:1px solid #666666;
    cursor:move;
    height:100px;
    width:100px;
    margin:10px;
    float:left;    
}
div.drop {
    background-color:#EEEEEE;
    border:1px solid #666666;
    cursor: pointer;
    height:150px;
    width:150px;
    margin:10px;
    float:left;
}
</style>
</head>
<body>
<div draggable="true" class="drag"
      οndragstart="dragStartHandler(event)">Drag me!</div>
<div class="drop"
      οndragenter="dragEnterHandler(event)"
      οndragοver="dragOverHandler(event)"
      οndrοp="dropHandler(event)">Drop here!<ol /></div>
<script>
var internalDNDType = 'text'; // 设定一个自订的关键词，定义DND数据类型
function dragStartHandler(event) {
    // 将数据复制到DataTransfer对象，指定DND数据类型
    event.dataTransfer.setData(internalDNDType,
                                     event.target.textContent);
    event.effectAllowed = 'move'; // 设定允许的操作，这里是仅允许移动
}
// dragEnter事件
function dragEnterHandler(event) {
    // 检查该拖放是否包含指定的DND数据类型，从而决定是否取消事件
    if (event.dataTransfer.types.contains(internalDNDType))
      if (event.preventDefault) event.preventDefault(); // 取消事件
}
// dragOver事件
function dragOverHandler(event) {
    event.dataTransfer.dropEffect = 'copy';             // 设定回馈
    if (event.preventDefault) event.preventDefault(); // 取消事件
}
// drop事件
function dropHandler(event) {
    // 获取拖曳时放置的DND数据
    var data = event.dataTransfer.getData(internalDNDType);
    // 下面建立一个li元素，将数据放进去
    var li = document.createElement('li');
    li.textContent = data;
    event.target.lastChild.appendChild(li);
}
</script>
</body>
</html>



HTML5之拖放功能_数据类型