html5网页元素拖拽 

<!doctype html>
<html>
<meta charset="utf-8"/>

<head>

<style>
.album
{
border: 3px dashed #ccc;
float: left;
margin: 10px;
min-height: 100px;
padding: 10px;
width: 220px;
}

</style>

<script language="javascript" src="js/jquery.js"></script>



<script language="javascript">
window.onload=function(){
var info = document.getElementById("info");
//获得被拖放的元素，本示例为相册所在的DIV
var src = document.getElementById("album");
//开始拖放操作
src.ondragstart = function (e) {
//获得被拖放的照片ID
var dragImgId = e.target.id;
//获得被拖动元素
var dragImg = document.getElementById(dragImgId);
//拖放操作结束
dragImg.ondragend = function(e){
//恢复提醒信息
info.innerHTML="<h2>温馨提示：可将照片直接拖到垃圾箱中</h2>";
};
e.dataTransfer.setData("text",dragImgId);
};
//拖放过程中
src.ondrag = function(e){ 
info.innerHTML="<h2>--照片正在被拖动--</h2>";
}
//获得拖放的目标元素
var target = document.getElementById("trash");
//关闭默认处理；          
target.ondragenter = function(e){             	//默认拒绝将用户立即选择的元素作为元素目标
e.preventDefault();
}
target.ondragover = function(e){				//到达可放下去下方，默认不做任何操作为none
e.preventDefault(); 
}



//有东西拖放到了目标元素
target.ondrop = function (e) {
//获取id
var draggedID = e.dataTransfer.getData("text");
//获取相册中的DOM对象
var oldElem = document.getElementById(draggedID);
//从相册DIV中删除该照片的节点
oldElem.parentNode.removeChild(oldElem);
//将被拖动的照片DOM节点添加到垃圾桶DIV中；
target.appendChild(oldElem);
info.innerHTML="<h2>温馨提示：可将照片直接拖到垃圾箱中</h2>";
e.preventDefault();
}
}

$(function(){
$("#dialog").dialog();
});
</script>

<title>
元素的拖拽
</title>
</head>
<body>

<div id="album" class="album">
<h2>相册</h2>
<img draggable="true" id="img1" src="http://file21.mafengwo.net/M00/5A/7B/wKgB3FIMiqiAKWxRAAD0hSp4CO022.head.w48.jpeg" />
<img draggable="true" id="img2" src="http://i1.dpfile.com/pc/335fdc75f9d15578df281eb28a868368(48c48)/thumb.jpg" />
<img draggable="true" id="img3" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVSTeXrgNjtSZkIJmRaqP6ReIM0a8NcRgeAyAG0z5AXCnlk-eh" />
</div>
<div id="trash" class="album">
<h2>垃圾箱</h2>
</div>
<br/>

<div id="info">
<h2>温馨提示：可将照片直接拖到垃圾箱中</h2>
</div>


</body>
</html>

 

 

<!doctype html>

元素的拖拽

相册

垃圾箱

 

温馨提示：可将照片直接拖到垃圾箱中

 

posted @ 2013-10-24 22:51  168Show  阅读(187)  评论(0)    收藏  举报