Почему мой Javascript не обнаруживает один из моих div? - PullRequest
Новая
       1

Почему мой Javascript не обнаруживает один из моих div?

0 голосов
/ 11 июля 2020

Я изучаю, как выполнить перетаскивание с помощью javascript.

Я хотел бы проверить, содержит ли div другой div. Я последовал этому совету от StackOverflow , но у меня возникла проблема.

Когда я пытаюсь проверить, содержит ли третий div (id = "box3") второй (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>

Ответы [ 2 ]

1 голос
/ 11 июля 2020

Я переместил ваш блок предупреждений в метод 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
1 голос
/ 11 июля 2020

Поскольку ваш "box3" не содержится в вашем элементе "box2", ваше условие не будет выполнено.

Вместо этого вы должны использовать случай 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");
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...