您的位置：首页 > Web前端 > HTML5

html5拖拽API及拖拽示例演示

2018-01-30 11:52 363 查看

dragstart 开始拖放操作

drag 拖放过程中

dragenter 被拖放的元素进入本元素内

dragover 被拖放的元素在本元素中移动

dragleave 被拖放的元素离开本元素的范围

drop 有其他元素被拖放到本元素中

dragend 拖放操作结束

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖放示例</title>
<script>
function init(){
var source = document.getElementById("dragme"),
dest = document.getElementById("text");
//1拖放开始
source.addEventListener("dragstart",function(e){
//console.log(e)
//向dataTransfer对象追加数据；
var dt = e.dataTransfer;
dt.effectAllowed = "move";
//2拖动元素为dt.setData("text/plain",this.id);
dt.setData("text/plain",this.id);
},false);
//3拖放结束：dragend
dest.addEventListener("dragend",function(e){
//不执行默认处理（拒绝被拖放）
e.preventDefault();
//console.log(e)
},false);
//4 被拖放 drop
dest.addEventListener("drop",function(e){
//从DataTransfet对象那里取得数据
var dt = e.
4000
dataTransfer;
var text = dt.getData("text/plain");
dest.appendChild(document.getElementById(text));
//5 不执行默认处理（拒绝被拖放）
e.preventDefault();
//停止事件传播
e.stopPropagation();
},false);
}
//设置页面属性，不执行默认处理（拒绝被拖放）
document.ondragover = function(e){
e.preventDefault();
}
document.ondrop = function(e){
e.preventDefault();
}
</script>
</head>
<body onload="init()">
<h1>简单拖放示例</h1>
<div id="dragme" draggable="true" style="width: 200px; line-height: 40px; text-align: center; background: yellow;">请拖放</div>
<div id="text" style="width: 200px; height: 200px; border: 1px solid #ddd;"></div>
</body>
</html>

感兴趣的朋友，关注下微信公众号：“学易资源共享平台”

扫码二维码关注，更多知识分享在这里，谢谢关注！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航