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

html5 原生 drag drop helloworld

2016-04-28 21:33 513 查看

drag drop helloworld

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" >
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
function dragStart(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
var data = ev.dataTransfer.getData("Text");
var node = document.getElementById(data);
ev.target.appendChild(node);
ev.target.style.border = "1px solid gray";
}
function dragEnter(ev) {
ev.target.style.border = "4px dotted green";
}
function dragLeave(ev) {
ev.target.style.border = "1px solid gray";
}
</script>
</head>
<body>
<div style="height: 100px;width:100px;border:1px solid gray;" ondrop="drop(event)"
ondragenter="dragEnter(event)"
ondragleave="dragLeave(event)"
ondragover="allowDrop(event)">
</div>
<div id="abc" draggable="true" ondragstart="dragStart(event)">拖动我</div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航