拖放（Drag 和 drop）是 HTML5 标准的组成部分。
----将图片拖入到DIV中 dragg.html
<!DOCTYPE html>
<html>
<title>将图片拖入到DIV中</title>
<head>
<style type="text/css">
#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
//设置被拖动的数据
function drag(event){
//设置备拖动数据的数据类型和值
//本例中数据类型为Text，值是可拖动元素的id("drag1")
event.dataTransfer.setData("Text",event.target.id);
}
//设置在何处放置备拖动的数据
function drop(event){
//当放置被拖动时会触发该事件
//默认地，无法将数据/元素放置到其他元素中，如果需要设置允许放置，我们必须阻止对元素的默认处理方式
event.preventDefault();
}
//放置设置
function allowDrop(event){
//调用preventDefault()来避免浏览器对数据的默认处理（drop事件的默认行为是以链接方式打开）
event.preventDefault();
//通过dataTransfer.getData("Text")方法获取被拖的数据，该方法将返回在setData()中的设置的相同类型的任何数据
var data=event.dataTransfer.getData("Text");
//把被拖元素追加到放置元素中
event.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p> 请将图片拖到矩形中：</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<br/>
<img id="drag1" src="w3school_banner.gif" draggable="true" ondragstart="drag(event)"></img>
</body>
</html>
@dianxinxinxiyuan.xiuyanxilu.pudongqu.shanghai
1.0.4 drag和drop拖放标签
猜你喜欢
转载自listen-raining.iteye.com/blog/2273960
今日推荐
周排行