标签：
今天学了HTML5，先学习了基础的标签header,footer,section,time,aside,article等，还学习了下拉列表：
<input list="one"/>
<datalist id="one">
<option value="one">
<option value="two">
<option value="three">
</datalist>
还有拖拽事件：
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div><p id="drag1" draggable="true" ondragstart="drag(event)">Move Me</p> </div>
</body>
<script type="text/javascript">
function allowDrop(ev){
ev.preventDefault();
}
function drag(e){
e.dataTransfer.setData("Text",e.target.id);
}
function drop(e){
var data = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
e.preventDefault();
}
</script>
然后我们做拖拽图片的案例
1.创建拖拽对象
①给需要拖拽的元素设置draggable属性，它有三个值：
true：元素可以被拖拽；
false：元素不能被拖拽；
auto： 浏览器自己判断元素是否能被拖拽。
2.处理拖拽事件
①当我们拖拽对象的时候会触发拖拽事件包括：
A.dragstart：当元素拖拽开始触发；
B.drag：在元素拖拽过程中触发；
C.dragend：元素拖拽结束时触发
3.创建投放区
①当拖拽对象进入投放区的时候会触发相关的事件
A.dragenter：当拖拽对象进入投放区时触发； B.dragover：拖拽对象在投放区内移动时触发； C.dragleave：拖拽对象没有投放到投放区，离开投放区的 时候触发；
D.drop：拖拽对象投放在投放区时触发。
②注意：dragenter、dragover可能会受到默认事件的影 响，所以我们在这两个事件当中使用 e.preventDefault();来阻止事件默认事件
4.使用dataTransfer传递数据
当我们需要拖拽对象向投放区传递数据的时候用到 dataTransfer有下面的属性和方法：
1.types：返回数据的格式； 2.getData(<format>)：返回指定格式数据； 3.setData(<format>, <data>)：设置指定格式数据；
4.clearData(<format>)：移除指定格式数据； 5.files：返回已经投放的文件的信息数组。 1.type：文件类型
2.size:文件大小
3.name:文件名
<div id="layer1">
<img src="images/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="layer2" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<script type="text/javascript">
function drag(e){
e.dataTransfer.setData(‘Text‘, e.target.id);
}
function allowDrop(e){
e.preventDefault();//
}
function drop(e){
var data= e.dataTransfer.getData(‘Text‘);
e.target.appendChild(document.getElementById(data));
e.preventDefault();//
}
</script>
标签：
原文地址：http://www.cnblogs.com/weihaidong/p/4706044.html
