要接受元素的放下，目标元素必须监听至少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"
ondragstart="dragStartHandler(event)">Drag me!</div>
<div class="drop"
ondragenter="dragEnterHandler(event)"
ondragover="dragOverHandler(event)"
ondrop="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>
