h5的拖拽事件 ondrop 实现鼠标跟随移动盒子

来源：互联网发布：布拉德利比尔数据编辑：程序博客网时间：2024/06/03 14:44

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box,.target{
width: 400px;
height: 400px;
border: 1px solid #000;
}
span{
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 50%;
background-color: pink;
float: left;
text-align: center;
line-height: 100px;
box-sizing: border-box;
}
.target{
position: absolute;
left: 600px;
top:200px;
}
</style>
</head>
<body>
<div class="box">
<span draggable="true">1</span>
<span draggable="true">2</span>
<span draggable="true">3</span>
<span draggable="true">4</span>
<span draggable="true">5</span>
<span draggable="true">6</span>
<span draggable="true">7</span>
<span draggable="true">8</span>
</div>

<div class="target"></div>

<script>
// 需求：
// 把box中的span 拖拽到target盒子中
var temp=null;
//1-给所有span标签绑定拖拽开始的事件，把拖拽的元素放到一个变量temp中
var spans=document.querySelectorAll('span');

for(var i=0;i<spans.length;i++){
spans[i].ondragstart=function(){
temp=this;
console.log(temp);
}
}
//2-当鼠标进入目标元素时，吧temp中的存放的元素追加到 target中

//阻止浏览器的默认行为
document.querySelector('.target').ondragover=function(e){
// 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
//这要通过调用 ondragover 事件的 event.preventDefault() 方法：
e.preventDefault();
}

document.querySelector('.target').ondrop=function(){
this.appendChild(temp);
temp=null;
}

</script>
</body>
</html>

阅读全文

0 0

h5的拖拽事件 ondrop 实现鼠标跟随 移动盒子

h5的拖拽事件 ondrop 实现鼠标跟随移动盒子