极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
.box{
margin-top: 20px;
}
.leftbox,.rightbox{
position: relative;
display: inline-block;
margin-left: 180px;
width: 180px;
min-height: 300px;
border: 1px solid #5f5f5f;
z-index: 10;
}
.leftbox span,.rightbox span{
margin: 0 auto;
display: block;
background-color: #1d7ad9;
border-bottom: 1px solid #222222;
height: 50px;
width: 180px;
cursor: move;
}
</style>
</head>
<body>
<div class="box">
<div class="leftbox">
<span></span>
<span></span>
<span></span>
</div>
<div class="rightbox">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
<script>
document.onmousedown=down;
var right=document.querySelector(".rightbox");
var left=document.querySelector(".leftbox");
function down(e){
if(e.target.nodeName.toLowerCase()=="span"){//e.target 的作用
var e=e||window.event;
e.target.setAttribute("draggable","true");
e.target.className="drup";//在这里给目标事件添加class属性的作用
var el=document.querySelector(".drup");//？
if(el.parentNode.className==="leftbox"){
el.ondragstart=function(e){
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData("text", e.target.innerHTML);
e.target.style.opacity="0.5"
};
el.ondragend=function(e){
e.target.style.opacity="1"
};
right.ondragover=function(e){
e.preventDefault();
e.dropEffect="move"
};
right.ondrop=function(e){
var span=document.createElement("span");
span.innerHTML=e.dataTransfer.getData("text");
right.appendChild(span);
el.parentNode.removeChild(el);
el.className=""
}
}
else if(el.parentNode.className==="rightbox"){
el.ondragstart=function(e){
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData("text", e.target.innerHTML);
e.target.style.opacity="0.5"
};
el.ondragend=function(e){
e.target.style.opacity="1"
}
left.ondragover=function(e){
e.preventDefault();
e.dropEffect="move"
}
left.ondrop=function(e){
var span=document.createElement("span");
span.innerHTML=e.dataTransfer.getData("text");
left.appendChild(span);
el.parentNode.removeChild(el)
el.className=""
}
}
}}问题即上面的注释
首先，下次贴代码还是贴全点。。后面少了两个后标签，以及不要把
script标签放在body外。e.target其中e就是你mousedown时产生的事件对象，其上的target属性是代表了触发这个事件的那个元素，在这里，你假如在蓝色区块上按下鼠标，则此时e.target指向那个蓝色区块。然后这里添加
drup的class并无意义，虽然后面通过querySelector去获取元素，但是其实就是e.target，同时css中也没有赋予特殊样式，不过也可以通过这个样式去做一些拖拽中的5毛特效。但是就这段代码而言，是没有意义的。