实现步骤
先在元素上添加属性 <div draggable="true"></div>, 定义这个属性后就可以注册拖动的事件了
拖动事件:
开始拖动时dragstart;
进行拖动时drag;
结束拖动时dragend拖拽区域触发事件:
拖拽元素进入区域时触发dragenter;
拖拽元素进入区域后悬停触发dragover;
拖拽元素离开区域时触发dragleave;
拖拽元素放置时触发drop
<style>
body {
background: yellowgreen;
}
.empty {
display: inline-block;
margin-right: 20px;
margin-top: 20px;
width: 150px;
height: 150px;
background: #fff;
border: 3px solid orangered;
}
.fill {
background-image: url("./pi2.jpg");
background-size: 100%;
height: 150px;
width: 150px;
cursor: pointer;
}
.hold {
border: 5px solid #ccc;
}
.holding {
border-style: dashed;
}
</style>
<body>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<div class="fill" draggable="true"></div>
</body>
<script>
/* 拖动时事件: 开始dragstart, 进行时drag, 结束dragend; */
const fill = document.querySelector('.fill');
fill.addEventListener('dragstart',function(){
this.className += ' hold';
console.log(this)
// this.className = 'invisible'; //为什么不直接设置，需要用一个定时器包裹呢？
setTimeout(()=>{ //如果直接进行设置，会发现开始拖动时, 原本的图片和拖拽在手上的图片同时消失
this.className = 'invisible'; //dragstart开始10后，才将原本位置上的图片设置成不可见;手上拖拽的图片任然可见;
console.log(this);
},10)
});
fill.addEventListener('dragend',function(){
this.className = 'fill'; //拖拽结束时, 重新给原来的fill元素节点设置 fill (有背景图片)
});
/* 拖拽区域触发事件: 进入时dragenter, 进入后dragover, 离开dragleave, 放置drop; */
const empties = document.querySelectorAll('.empty'); //所有的有该class的元素节点 数组
// const empty = document.querySelector('.empty'); //获取到第一个该class的元素节点
for(var i of empties){
i.addEventListener('dragenter',dragEnter);
i.addEventListener('dragover',dragOver);
i.addEventListener('dragleave',dragLeave);
i.addEventListener('drop',drop);
}
function dragEnter(){
this.className += " holding";
}
function dragOver(e){
e.preventDefault();
}
function dragLeave(){
this.className = 'empty';
}
function drop(){
//无法打印'drop', 默认情况下 拖动对象不能在某些元素中拖动,需要在dragOver时添加阻止默认事件
// console.log('drop')
this.className = 'empty';
this.append(fill);
}
</script>
