h5拖拽事件
地址
demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container {
width: 200px;
height: 200px;
background: #DDEEDD;
border: 1px solid #000;
}
.box {
width: 100px;
height: 100px;
background: red;
}
.big {
width: 200px;
height: 200px;
background-color: #FFDDEE;
border: 1px solid #000;
}
.small {
width: 100px;
height: 100px;
background-color: #eeddaa;
}
</style>
</head>
<body>
<div class="container" ondragover="allowDrag(event)" ondrop="drop(event)"></div>
<div class="box" id="box" ondragstart="drag(event)" draggable="true">可拖拽</div>
</body>
</html>
<script type="text/javascript">
function drag (event) {
event.dataTransfer.setData("Text", event.target.id)
}
function allowDrag (event) {
event.preventDefault()
}
function drop (event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data))
}
</script>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
