HTML5之拖放功能

来源：互联网发布：幼儿园网络培训心得编辑：程序博客网时间：2024/05/01 16:40

要接受元素的放下，目标元素必须监听至少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>