我将“拖拽”拖到“container1”和“container2”。当它被放下时,“drag”如果在“container1”中则变成深紫色,如果在“container2”中则变成深橙色。
这就是我所拥有的,当它悬停在可放置容器上时,它会改变“拖动”,但当它被放置时它不会改变颜色。任何帮助表示赞赏!谢谢你!
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
width: 50px;
height: 50px;
background: #e9559a;
padding: 13px;
margin: 0 5px 5px 0;
}
.bdrag {
height: 100px;
width: 100px;
background: grey;
padding: 5px;
}
.dark-purple {
background: #8b0000;
}
.dark-orange {
background: #000080
}
.drop-green {
background: #38a53a;
}
.drop-yellow {
background: #fbff23;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<div class="shape-container">
<div id="origin-container" class="container">
<div id="dragbox" class="bdrag text-dark">
<p>Draggable Box</p>
</div>
</div>
<div id="dcontainer2" class="container"> …Run Code Online (Sandbox Code Playgroud)