学习笔记--HTML5拖拽

前言

HTML5中对于拖拽有专门的支持
HTML拖拽

<img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />

可被拖拽的元素要将他的draggable 属性设置为true，ondragstart是用来设置当拖拽开始的时候的响应方法；ondragend 设置当拖拽完成后的响应方法。

对于目标元素

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

当拖曳元素进入目标元素的时候触发ondragenter 事件，拖拽元素在目标元素上移动的时候触发ondragover 事件，被拖拽的元素在目标元素上同时鼠标放开触发ondrop 事件。

数据的传递是通过DataTransfer 对象来实现的，一遍写法是Event.dataTransfer。

js 中响应方法的一般写法

function allowDrop(ev){ev.preventDefault();//调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）}function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);//dataTransfer.setData() 方法设置被拖数据的数据类型和值：//在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。}function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData("Text");//通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。ev.target.appendChild(document.getElementById(data));}//Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。//Event.effectAllowed 属性：就是拖拽的效果//还未验证过

参考资料

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

HTML5 drag & drop 拖拽与拖放简介