<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1{
width: 300px;
height: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<!-- 放 -->
<div id="d1" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
<!-- 拖 -->
<img id="img1" src="../img/饭团.png"
draggable="true" οndragstart="drag(event)" width="100px" height="100px">
</body>
<script type="text/javascript">
function drag(e){
e.dataTransfer.setData("text1",e.target.id);
}
function allowDrop(e){
// 阻止浏览器无法拖动的问题
e.preventDefault();
}
function drop(e){
//接收数据
var data=e.dataTransfer.getData("text1");
e.target.appendChild(document.getElementById(data));
}
</script>
</html>
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
