（1）要使元素成为可拖动元素，首先要设置元素的draggable属性为true，但默认情况下，图像img元素、链接a元素都是可拖动的，即draggable属性默认为true
（2）与拖放有关的事件类型有：
dragstart（拖放操作开始时触发）：产生事件的元素是被拖放的元素
drag（拖放过程中持续触发）：产生事件的元素是被拖放的元素
dragenter（被拖放的元素开始进入放置目标元素时触发）：产生事件的元素是目标元素
dragover（被拖放的元素在目标元素范围内移动时持续触发）：产生事件的元素是目标元素
dragleave（被拖放的元素离开放置目标元素时触发）：产生事件的元素是目标元素
drop（被拖放的元素放置到目标元素时触发）：产生事件的元素是目标元素
dragend（整个拖放操作结束时触发）：产生事件的元素是被拖放的元素
（3）拖放过程中的数据传输方法：利用event.dataTransfer对象
该对象的属性有：（注意：dropEffect必须搭配effectAllowed才能使用）
1）dropEffect：表示实际拖放时的视觉效果，一般在ondragover事件处理程序中设定，属性值有：none（不允许放置）、copy（复制到目标元素）、move（移动到目标元素）、link（目标元素打开被拖动的元素），但必须在effectAllowed属性允许的视觉效果范围内设置属性值
2）effectAllowed：指定元素被拖放时所允许的视觉效果，一般在ondragstart事件处理程序中设定，属性值有：copy（只允许值为“copy”的dropEffect）、move、link、copyMove、copyLink、linkMove、all（允许所有拖动操作）、none（不允许执行任何拖动操作）、uninitialized（不指定属性值，将执行浏览器中默认允许的拖动操作）
3）types：表示存入数据的类型
该对象的方法有：
1）setData（数据格式，数据值）：向dataTransfer对象中存入数据
2）getData（数据格式）：从dataTransfer对象中读取数据
3）clearData（数据格式）：清除dataTransfer对象中保存的指定格式的数据，如果不指定格式，则清除全部数据
4）setDragImage（图像元素，光标在图像中的x坐标，y坐标）：用img元素设置拖放图标
具体demo如下：
<!DOCTYPEhtml>
<html>
<head>
<meta charset='utf-8'>
<title>HTML5的拖放功能</title>
<style type="text/css">
#dropelement{
width:500px;
height: 300px;
border:solid 2px#d2d2d3;
box-shadow: 1px 4px8px #646464;
}
#dragelement{
width: 500px;
height: 300px;
background: #e54d26;
}
</style>
</head>
<body>
<h1>拖动图片到指定位置</h1>
<divid='dropelement' οndrοp="drop(event)"οndragοver="allowDrop(event)"></div>
<br/>
<imgsrc="HTML5.png" id='dragelement' width="400"height="280" draggable='true' οndragstart="drag(event)">
<scripttype="text/javascript">
function drag(event){
//设置元素被拖放时所允许的视觉效果
event.dataTransfer.effectAllowed='all';
//将被拖动元素的id存入dataTransfer对象
event.dataTransfer.setData('Text',event.target.id);
}
function allowDrop(event){
//所有元素默认是不允许放置其他元素的，所以要阻止默认行为，使其成为可放置元素
event.preventDefault();
//设置实际拖放时的视觉效果，拖放鼠标会带个"+"
event.dataTransfer.dropEffect='copy';
}
function drop(event){
//所有元素默认是不允许放置其他元素的，所以要阻止默认行为，使其成为可放置元素
event.preventDefault();
//从dataTransfer对象中获取保存的被拖动元素的id
vardata=event.dataTransfer.getData('Text');
//将被拖动元素作为子节点添加到放置目标元素中
event.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
效果图为：
扫一扫
2219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
