我正在学习如何使用javascript进行拖放活动。
我想检查一个div是否包含另一个div。我遵循了StackOverflow的建议,但遇到了问题。
当我尝试检查第三个div(id =“ box3”)是否包含第二个div(id =“ box2”)时,不显示警报。仅当我检查第一个div(id =“ box1”)是否包含第二个div(id =“ box2”)时,才会检测到它。
如果有人可以帮助我,我在这里写我的代码。谢谢。
class Draggable {
constructor() {
this.container = document.querySelector('.box__dragabble');
this.box = document.querySelectorAll('.box');
this._addEventListener();
}
_addEventListener() {
this.box.forEach(element => {
element.addEventListener('dragenter', this.dragenter);
element.addEventListener('dragleave', this.dragleave);
element.addEventListener('dragover', this.dragover);
element.addEventListener('drop', this.drop);
});
this.container.addEventListener('dragstart', this.dragstart);
this.container.addEventListener('dragend', this.dragend);
}
dragstart(e) {
this.classList.add('drag_start');
setTimeout(() => {
this.classList.add('invisible');
}, 0);
}
dragend(e) {
console.log('dragend');
this.classList.remove('invisible');
this.classList.remove('drag_start');
}
dragenter(e) {
e.preventDefault();
console.log('dragenter');
this.classList.add('drag_enter');
}
dragleave(e) {
console.log('dragleave');
this.classList.remove('drag_enter');
}
dragover(e) {
e.preventDefault();
console.log('dragover');
}
drop() {
let container = document.querySelector('.box__dragabble');
this.classList.remove('drag_enter');
this.append(container);
}
static init() {
return new this();
}
}
var boxe = document.getElementById("box3");
var boxd = document.getElementById("box2");
if (boxe.contains(boxd)) {
alert("Congratulations");
}
document
.addEventListener('load', Draggable.init());
.container {
display: flex;
justify-content: space-between;
padding: 20px;
width: 50%;
margin: 0 auto;
height: 100vh;
}
.box {
height: 100px;
width: 100px;
border: 5px solid #000000;
display: flex;
justify-content: center;
align-items: center;
}
.box__dragabble {
width: 95%;
height: 95%;
background: #000000;
}
.box__dragabble img {
width: 100%;
height: 100%;
}
.drag_start {
opacity: .5;
}
.invisible {
display: none;
}
.drag_enter {
border: 5px dashed #112244;
}
<body>
<div class="container">
<div class="box" id="box1">
<div class="box__dragabble" id="box2" draggable="true">
<img src="./img/rose.jpg" alt="rose">
</div>
</div>
<div class="box" id="box3"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="./index.js"></script>
</body>
我已将您的警报块移至该drop
方法中,以便在每次放置事件触发时都对其进行调用。
class Draggable {
constructor() {
this.container = document.querySelector('.box__dragabble');
this.box = document.querySelectorAll('.box');
this._addEventListener();
}
_addEventListener() {
this.box.forEach(element => {
element.addEventListener('dragenter', this.dragenter);
element.addEventListener('dragleave', this.dragleave);
element.addEventListener('dragover', this.dragover);
element.addEventListener('drop', this.drop);
});
this.container.addEventListener('dragstart', this.dragstart);
this.container.addEventListener('dragend', this.dragend);
}
dragstart(e) {
this.classList.add('drag_start');
setTimeout(() => {
this.classList.add('invisible');
}, 0);
}
dragend(e) {
console.log('dragend');
this.classList.remove('invisible');
this.classList.remove('drag_start');
}
dragenter(e) {
e.preventDefault();
console.log('dragenter');
this.classList.add('drag_enter');
}
dragleave(e) {
console.log('dragleave');
this.classList.remove('drag_enter');
}
dragover(e) {
e.preventDefault();
console.log('dragover');
}
drop() {
let container = document.querySelector('.box__dragabble');
this.classList.remove('drag_enter');
this.append(container);
//
// the following block should be placed here to have it called each time a drop event takes place
var boxe = document.getElementById("box3");
var boxd = document.getElementById("box2");
if (boxe.contains(boxd)) {
alert("Congratulations");
}
static init() {
return new this();
}
}
// this block is called once, during the init() process
// it should be moved to the drop() method above
/*var boxe = document.getElementById("box3");
var boxd = document.getElementById("box2");
if (boxe.contains(boxd)) {
alert("Congratulations");
}*/
document.addEventListener('load', Draggable.init());
.container {
display: flex;
justify-content: space-between;
padding: 20px;
width: 50%;
margin: 0 auto;
height: 100vh;
}
.box {
height: 100px;
width: 100px;
border: 5px solid #000000;
display: flex;
justify-content: center;
align-items: center;
}
.box__dragabble {
width: 95%;
height: 95%;
background: #000000;
}
.box__dragabble img {
width: 100%;
height: 100%;
}
.drag_start {
opacity: .5;
}
.invisible {
display: none;
}
.drag_enter {
border: 5px dashed #112244;
}
<div class="container">
<div class="box" id="box1">
<div class="box__dragabble" id="box2" draggable="true">
<img src="./img/rose.jpg" alt="rose">
</div>
</div>
<div
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句