第六章：HTML5的元素拖曳
1.HTML5中拖曳的实现方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<html>
<style>
img{width:100px;height:100px}
</style>
<body>
<div id="src">
<img draggable="true" src="1.png" id="b"/>
<img draggable="true" src="2.png" id="c"/>
<img draggable="true" src="3.png" id="d"/>
<img draggable="true" src="4.jpg" id="e"/>
</div>
<div id="target" style="border-style:solid;width: 200px;height:200px; margin-top:20px">
<p>将选择的图片拖曳到这里</p>
</div>
<span id="msg"></span>
<script>
var src = document.getElementById("src");
var target = document.getElementById("target");
var msg = document.getElementById("msg");
var draggedID;
src.ondragstart = function (e) {//开始拖曳元素时触发
draggedID = e.target.id; //获取拖曳对象ID
msg.innerHTML="开始拖曳"+draggedID;
}
target.ondragenter = function (e){//拖曳时鼠标进入目的元素时触发
msg.innerHTML="进入目的元素";
e.preventDefault();
}
target.ondragover = function (e){//拖曳时鼠标在目的元素内移动时触发
msg.innerHTML="在目的元素内移动";
e.preventDefault();
}
src.ondragend = function (e){//拖曳动作结束时触发
msg.innerHTML="结束拖曳";
}
target.ondrop = function (e) {//在目的元素内释放拖曳元素时触发
var newElem = document.getElementById(draggedID).cloneNode(false);
target.innerHTML = "";
target.appendChild(newElem);
e.preventDefault();
}
</script>
</body>
</html>
2.dataTransfer对象
dataTransfer对象专门用于处理拖曳过程中产生的数据信息
effectAllowed属性：
用于设置或返回指定元素被拖曳时被允许的显示效果
可以设定的值包括"none","copy","copyLink","copyMove","link","move","all","uninitialized"
dropEffect属性:
用于设置或返回指定被拖曳元素释放拖曳的显示效果
该属性设置的值必须在effectAllowed设置范围内，否则无效
items属性
用于返回DataTransferItemList对象
types属性
用于返回已保存的数据类型，如果是文件操作则返回文件型字符串
files属性
用于返回被拖曳的文件列表
1.setData(format,data)
--format表示保存的数据类型
--data表示数据内容
src.ondragstart=function(e){
e.dataTransfer.setData("Text",e.target.id) //使用dataTranster保存拖曳元素id
msg.innerHTML="开始拖曳"+draggedID;
}
2.getData(format)
该方法用于从dataTransfer对象读取指定类型的数据信息
参数format表示读取的数据类型
target.ondrop = function (e) {//在目的元素内释放拖曳元素时触发
var droppedID=e.dataTransfer.getData("Text")
var newElem = document.getElementById(draggedID).cloneNode(false);
target.innerHTML = "";
target.appendChild(newElem);
e.preventDefault();
}
3.clearData(format)
该方法用于从dataTransfer对象中移除指定类型的数据信息
4.setDragImage(image,x,y)
--image用于设定拖曳图标的图像元素
--x用于设定图标与鼠标指针在x轴方向的距离
--y用于设定图标与鼠标指针在y轴方向的距离
src.ondragstart = function (e) {//开始拖曳元素时触发
draggedID = e.target.id; //获取拖曳对象ID
var img=document.creatElement('img')
img.src="icon.jpg"
e.dataTransfer.setDragImage(img,-10,-10)
msg.innerHTML="开始拖曳"+draggedID;
}
3.文件拖曳操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div id="target" style="border-style:solid;width:200px;height:200px;margin-top:
20px">
<p>将您本地的文件拖曳到这里</p>
</div>
<table id="data" border="1">
</table>
<script>
var target = document.getElementById("target");
target.ondragenter = handleDrag;
target.ondragover = handleDrag;
function handleDrag(e) {
e.preventDefault();
}
target.ondrop = function (e) {
var files = e.dataTransfer.files;
var tableElem = document.getElementById("data");
tableElem.innerHTML = "<tr><th>文件名</th><th>文件类型</th><th>文件大小</th></tr>";
for (var i = 0; i < files.length; i++) {
var row = "<tr><td>" + files[i].name + "</td><td>" + files[i].type + "</td><td>" + files[i].size + "</td></tr>";
tableElem.innerHTML += row;
}
e.preventDefault();
}
</script>
</body>
</html>
