[英]Why is my Javascript not detecting one of my divs?
I am learning how to do a drag and drop activity with javascript.我正在学习如何使用 javascript 进行拖放活动。
I would like to check when a div contains another div.我想检查一个 div 何时包含另一个 div。 I followed this advice from StackOverflow but I have a problem.我遵循了StackOverflow的这个建议,但我遇到了问题。
When I try to check if the third div (id="box3") contains the second one (id="box2"), the alert is not shown.当我尝试检查第三个 div (id="box3") 是否包含第二个 (id="box2") 时,不会显示警报。 Only if I check if the first div (id="box1") contains the second div(id="box2"), then it is detected.只有当我检查第一个 div (id="box1") 是否包含第二个 div(id="box2") 时,它才会被检测到。
I write here my code if anyone could help me.如果有人可以帮助我,我在这里写我的代码。 Thanks.谢谢。
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>
As your "box3" is not contained within your "box2" element, then your condition will fail.由于您的“box3”不包含在您的“box2”元素中,因此您的条件将失败。
Instead you should use an else
case that will alert a different message if the case is false.相反,您应该使用else
案例,如果案例为假,它将提醒不同的消息。
var boxe = document.getElementById("box3");
var boxd = document.getElementById("box2");
if (boxe.contains(boxd)) {
alert("Congratulations");
} else {
alert("box 2 is not contained in box 3");
}
I have moved your alert block into the drop
method to have it called each time a drop event fires.我已将您的警报块移动到drop
方法中,以便在每次触发 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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.