jquery 中当鼠标被按下然后拖动,经过一个元素,如何触发这个元素绑定的...
发布网友
发布时间：2022-04-23 09:45
共1个回答
热心网友
时间：2022-04-22 14:01
用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>
