html代码：：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/reset.css" />
<style>
#src > *{float: left;}
#target,#src > img{border: thin solid black; padding: 2px;margin: 4px;}
#target{height: 81px; width: 81px; text-align: center; display: table;}
#target > p{display: table-cell;vertical-align: middle;}
#target > img{margin: 1px;}
img.dragged{background-color: lightgray;}//图片被拖动过程中图片愿位置的背景色
</style>
</head>
<body>
<div id="src">
<img draggable="true" id="banana" src="img/图片1.jpg" alt="banana" />
<img draggable="true" id="apple" src="img/图片2.png" alt="apple" />
<img draggable="true" id="cherries" src="img/图片3.png" alt="cherry" />
<div id="target">
<p id="msg">Drop Here</p>
</div>
</div>
<script>
var src = document.getElementById("src");
var target = document.getElementById("target");
var msg = document.getElementById("msg");
var draggedID;
target.ondragenter = handleDrag;
target.ondragover = handleDrag;
function handleDrag(e){ //设置阻止浏览器默认的行为，浏览器默认禁止一个控件拖入另一个控件
// if(e.dataTransfer.getData("Text") == "banana") { //谷歌浏览器里不能用这种方法
e.preventDefault();
// }
}
target.ondrop = function(e){ //当被拖动元素在释放区里什邡市触发
var dropID = e.dataTransfer.getData("Text"); //获取dataTransfer的数据
var newElem = document.getElementById(draggedID).cloneNode(false);
target.innerHTML="";
target.appendChild(newElem);
e.preventDefault();
}
src.ondragstart = function(e){ //开始拖动响应
e.dataTransfer.setData("Text",e.target.id); //往dataTransfer中添加数据并，指定类型
e.target.classList.add("dragged");
draggedID = e.target.id;
};
src.ondragend = function(e){ //拖动结束的时候执行
e.target.classList.remove("dragged");
msg.innerHTML = "Drop Here";
/*
var elems = document.querySelectorAll(".dragged");
for(var i=1;i<elems.length;i++){
elems[i].classList.remove("dragged");
}
*/
};
src.ondrag = function(e){ //拖动过程中反复执行
msg.innerHTML = e.target.id;
};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/reset.css" />
<style>
#src > *{float: left;}
#target,#src > img{border: thin solid black; padding: 2px;margin: 4px;}
#target{height: 81px; width: 81px; text-align: center; display: table;}
#target > p{display: table-cell;vertical-align: middle;}
#target > img{margin: 1px;}
img.dragged{background-color: lightgray;}//图片被拖动过程中图片愿位置的背景色
</style>
</head>
<body>
<div id="src">
<img draggable="true" id="banana" src="img/图片1.jpg" alt="banana" />
<img draggable="true" id="apple" src="img/图片2.png" alt="apple" />
<img draggable="true" id="cherries" src="img/图片3.png" alt="cherry" />
<div id="target">
<p id="msg">Drop Here</p>
</div>
</div>
<script>
var src = document.getElementById("src");
var target = document.getElementById("target");
var msg = document.getElementById("msg");
var draggedID;
target.ondragenter = handleDrag;
target.ondragover = handleDrag;
function handleDrag(e){ //设置阻止浏览器默认的行为，浏览器默认禁止一个控件拖入另一个控件
// if(e.dataTransfer.getData("Text") == "banana") { //谷歌浏览器里不能用这种方法
e.preventDefault();
// }
}
target.ondrop = function(e){ //当被拖动元素在释放区里什邡市触发
var dropID = e.dataTransfer.getData("Text"); //获取dataTransfer的数据
var newElem = document.getElementById(draggedID).cloneNode(false);
target.innerHTML="";
target.appendChild(newElem);
e.preventDefault();
}
src.ondragstart = function(e){ //开始拖动响应
e.dataTransfer.setData("Text",e.target.id); //往dataTransfer中添加数据并，指定类型
e.target.classList.add("dragged");
draggedID = e.target.id;
};
src.ondragend = function(e){ //拖动结束的时候执行
e.target.classList.remove("dragged");
msg.innerHTML = "Drop Here";
/*
var elems = document.querySelectorAll(".dragged");
for(var i=1;i<elems.length;i++){
elems[i].classList.remove("dragged");
}
*/
};
src.ondrag = function(e){ //拖动过程中反复执行
msg.innerHTML = e.target.id;
};
</script>
</body>
</html>
2982
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
