javascript – Drag and drop in IOS webview

I’ve a IOS webview the place I inject the next javascript. For some motive, drag and drop nonetheless does not work.

This is my javascript

let dragScript = """
    const dragItems = doc.querySelectorAll('.drag-item');
              const dropZones = doc.querySelectorAll('.drop-zone');

              let draggedItem = null;

              dragItems.forEach(merchandise => {
                  merchandise.addEventListener('dragstart', () => {
                      draggedItem = merchandise;
                  });

                  merchandise.addEventListener('dragend', () => {
                      draggedItem = null;
                  });
              });

              dropZones.forEach(zone => {
                  zone.addEventListener('dragover', e => {
                      e.preventDefault();
                  });

                  zone.addEventListener('drop', () => {
                      if (zone.kids.size === 0) {
                          zone.appendChild(draggedItem);
                      }
                  });
              });

              operate checkAnswers() {
                  dropZones.forEach(zone => {
                      const reply = zone.querySelector('.drag-item');
                      if (reply && reply.dataset.reply === zone.dataset.appropriate) {
                          zone.classList.add('appropriate');
                          zone.classList.take away('improper');
                      } else {
                          zone.classList.add('improper');
                          zone.classList.take away('appropriate');
                      }
                  });
              }
"""
webView.evaluateJavaScript(dragScript) { _, error in
    if let error = error {
        print("Error injecting drag script: (error.localizedDescription)")
    }
}

This is the html

   <div class="quiz-container">
        <div class="drag-items">
            <div class="drag-item" draggable="true" data-answer="1776">1776</div>
            <div class="drag-item" draggable="true" data-answer="George Washington">George Washington</div>
            <div class="drag-item" draggable="true" data-answer="Boston Tea Social gathering">Boston Tea Social gathering</div>
            <div class="drag-item" draggable="true" data-answer="Treaty of Paris">Treaty of Paris</div>
        </div>

        <div class="drop-zones">
            <div class="drop-zone" data-correct="1776">12 months the Declaration of Independence was signed:</div>
            <div class="drop-zone" data-correct="George Washington">Chief of the Continental Military:</div>
            <div class="drop-zone" data-correct="Boston Tea Social gathering">Occasion the place colonists protested by dumping tea:</div>
            <div class="drop-zone" data-correct="Treaty of Paris">Settlement that ended the American Revolution:</div>
        </div>
    </div>

Can somebody assist? Thanks!