मैं सीख रहा हूं कि जावास्क्रिप्ट के साथ ड्रैग एंड ड्रॉप गतिविधि कैसे करें।

मैं यह जांचना चाहता हूं कि एक 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>
0
rgher 11 जुलाई 2020, 20:08

2 जवाब

सबसे बढ़िया उत्तर

मैंने आपके अलर्ट ब्लॉक को 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
maswerdna 11 जुलाई 2020, 21:18

चूंकि आपका "बॉक्स 3" आपके "बॉक्स 2" तत्व में शामिल नहीं है, तो आपकी स्थिति विफल हो जाएगी।

इसके बजाय आपको एक 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");
}
1
victini 11 जुलाई 2020, 20:29