这里是学习html5的拖放功能。这个API主流浏览器基本支持。ie浏览器是有限支持，dataTransfer.setData/getData。
在html5里面，任何元素都是可以拖放的。
- 需要拖放的元素要添加draggable="true"这个属性。然后设置拖动的时候触发的事件οndragstart="drag(event)"。函数里面设置传递的数据，将拖动元素的信息传递给e.dataTransfer。
- 设置ondragover事件触发的函数。先要将存放元素的容器如div触发ondragover事件，确保容器可以放元素，使用event.preventDefault()方法。然后容器触发ondrop事件，接受e.dataTransfer传递过来的值。
代码：
<style type="text/css" rel="stylesheet">
body {
width:80%;
margin:0 auto;
}
.drop {
border:1px solid black;
width:30%;
height:200px;
float: left;
}
img {
width:20%;
}
</style>
<script type="text/javascript">
function allowdrop(e){
e.preventDefault();
}
function drag(e){
e.dataTransfer.setData('text',e.target.id);
}
function drop(e){
e.preventDefault();
var data = e.dataTransfer.getData('text');
e.target.appendChild(document.getElementById(data));
}
function drop_del(e){
e.preventDefault();
var data = e.dataTransfer.getData('text');
//e.target.appendChild(document.getElementById(data));
document.getElementById(data).remove();
}
</script>
</head>
<body>
<div>
<h2>做蛋糕要用哪些材料呢，选出来扔进篮子里吧</h2>
<img src="./ex_1.jpg" alt="pic" id=dragimg1 draggable="true" οndragstart="drag(event)">
<img src="./tx.jpg" alt="pic" id=dragimg2 draggable="true" οndragstart="drag(event)">
<img src="./tx.jpg" alt="pic" id=dragimg3 draggable="true" οndragstart="drag(event)">
</div>
<div class="drop" οndragοver="allowdrop(event)" οndrοp="drop(event)">
</div>
<div class="drop" οndragοver="allowdrop(event)" οndrοp="drop_del(event)"><p>多出来的扔掉吧~</p></div>
439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
