展开全部
用h5的拖放事件。ondrag,ondragenter,ondragover,ondrop等。给你一个demo。记得自己加图片。
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5实现拖拽操作</title>
<meta charset="utf-8"/>
<style>
.album
{
border: 3px dashed #ccc;
float: left;
margin: 10px;
min-height: 100px;
padding: 10px;
width: 220px;
}
</style>
</head>
<body>
<div id="info">
<h2>温馨提示：可将照片直接拖到垃圾箱中</h2>
</div>
<div id="album" class="album">
<h2>相册</h2>
<img draggable="true" id="img1" src="jq/audio1.png" />
<img draggable="true" id="img2" src="jq/audio2.png" />
<img draggable="true" id="img3" src="jq/audio3.png" />
<div id="div1" draggable="true">暗涌</div>
</div>
<div id="trash" class="album">
<h2>垃圾箱</h2>
<h1 id="h1" draggable="true">what</h1>
</div>
<br/>
</body>
<script>
console.log("start");
info = document.getElementById("info");
src = document.getElementById("album");
target = document.getElementById("trash");
function converse(){
target.ondragstart = function(e){
var dragid = e.target.id;
var divdraged = document.getElementById(dragid);
console.log(divdraged);
divdraged.ondragend = function(){
info.innerHTML = "<h2>温馨提示：可将照片直接拖到垃圾箱中</h2>";
}
e.dataTransfer.setData("div",dragid);
}
target.ondrag = function(){
info.innerHTML = "<h2>确认回收此垃圾</h2>"
}
src.ondrop = function(e){
var dragid = e.dataTransfer.getData("div");
console.log(dragid);
var dragobject = document.getElementById(dragid);
console.log(dragobject);
dragobject.parentNode.removeChild(dragobject);
info.innerHTML = "<h2>恢复成功！</h2>";
src.appendChild(dragobject);
e.preventDefault();
}
src.ondragenter = function(e){
e.preventDefault();
}
src.ondragover = function(e){
e.preventDefault();
}
}
function init(){
src.ondragstart = function (e) {
var dragImgId = e.target.id;
console.log(dragImgId);
var dragImg = document.getElementById(dragImgId);
dragImg.ondragend = function(e){
info.innerHTML="<h2>温馨提示：可将照片直接拖到垃圾箱中</h2>";
};
e.dataTransfer.setData("img",dragImgId);
};
src.ondrag = function(e){
info.innerHTML="<h2>--照片正在被拖动--</h2>";
}
target.ondragenter = function(e){
e.preventDefault();
}
target.ondragover = function(e){
e.preventDefault();
}
target.ondrop = function (e) {
var draggedID = e.dataTransfer.getData("img");
console.log(draggedID);
var oldElem = document.getElementById(draggedID);
oldElem.parentNode.removeChild(oldElem);
target.appendChild(oldElem);
info.innerHTML="<h2>温馨提示：可将照片直接拖到垃圾箱中</h2>";
e.preventDefault();
}
}
init();
converse();
</script>
</html>
更多追问追答
追问
这个功能我会做，我的问题是在拖动的时候，如何触发给目标层绑定的悬浮事件。。。比如你给的demo里，拖动到 trash上但还没有松开鼠标，如何触发 trash的悬浮事件呢
追答
trash作为drag事件的target，ondragenter 相当于目标层的hover。你可以在ondragenter或者ondragover中写你想要的功能。然后取消ondrop
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
