HTML5图片拖放
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1{
width:488px;
height:250px;
padding:10px;
border:1px solid #aaaaaa;}
#div2{
width: 488px;
height: 250px;
padding: 10px;
border: 1px solid #ff00aa;
}
</style>
<script type="text/javascript">
//允许拖放
function allowDrop(event){
event.preventDefault();//默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式
}
//拖放
function drag(event){
event.dataTransfer.setData("Text",event.target.id);
}
//放置数据
function drop(event){
event.preventDefault();
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
function drop2(event){
event.preventDefault();
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>HTML5拖放图片</p>
<!-- ondragover事件规定在何处放置被拖动的数据 -->
<!-- ondragstart事件规定当元素被拖动时，会发生什么 -->
<!-- ondrop事件当放置被拖数据时，会发生 drop 事件 -->
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"/></div>
<br />
<img id="drag1" src="http://g.hiphotos.baidu.com/baike/s%3D220/sign=7a3eb4ee97dda144de096bb082b5d009/e1fe9925bc315c6042417b128db1cb1348547772.jpg" draggable="true" ondragstart="drag(event)" />
<div id="div2" ondragover="allowDrop(event)" ondrop="drop2(event)"></div>
</body>
</html>
相关推荐
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...