Calling an axios POST request with HTML drag and drop

Question

I'm creating a kanban board - and I have a drag and drop system working.

response.js

function allowDrop(ev) {
    ev.preventDefault();
}
  
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

const drop = async(ev, el) => {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");

    el.appendChild(document.getElementById(data));
    
    newSection = el.parentElement.childNodes[0].childNodes[0].textContent;
    sortItems(el);
}

When called:

ondrop='drop(event, this)' ondragover='allowDrop(event)'

However, I need to run this axios request at the same time as my drag().

The request updates which board column the dragged card is in.

const res = await axios({
    method: 'POST',
    url: 'http://127.0.0.1:3000/api/1/projects/updateCardPlace',
    data: {
        cardID, // not gotten yet - ignore this.
        newSection
    }
});

I'm using parcel bundler:

package.json » scripts

"build:js": "parcel watch ./public/js/index.js --out-dir --public-url ./public/js --out-file bundle.js"

I have tried:

• adding my method to my index.js (where it should be called, imported from login.js)
• adding it directly to bundle.js

However I keep getting: Uncaught ReferenceError: sendNewCard is not defined (I made a method called sendNewCard which is called in the ondrop attribute of the card.

I would really appreciate some help with this, and please do let me know if more information is required - I'm relatively new to this, as you might have figured.

Bundle.js

var sendNewCard = /*#__PURE__*/function () {
  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(el) {
    var res;
    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            if (!(el != 1)) {
              _context.next = 13;
              break;
            }

            newSection = el.parentElement.childNodes[0].childNodes[0].textContent;
            _context.prev = 2;
            _context.next = 5;
            return (0, _axios.default)({
              method: 'POST',
              url: 'http://127.0.0.1:3000/api/1/projects/updateCardPlace',
              data: {
                cardID: cardID,
                // not gotten yet - dont worry about this.
                newSection: newSection
              }
            });

          case 5:
            res = _context.sent;

            if (res.data.status === 'Success') {
              (0, _alerts.showAlert)('success', 'Successfully transferred.');
            } else {
              (0, _alerts.showAlert)('error', 'Unsuccessfully transferred.');
            }

            _context.next = 13;
            break;

          case 9:
            _context.prev = 9;
            _context.t0 = _context["catch"](2);
            console.log(_context.t0.message);
            (0, _alerts.showAlert)('error', 'Unsuccessfully transferred.');

          case 13:
          case "end":
            return _context.stop();
        }
      }
    }, _callee, null, [[2, 9]]);
  }));

  return function sendNewCard(_x) {
    return _ref.apply(this, arguments);
  };
}();

exports.sendNewCard = sendNewCard;

PUG RENDERED HTML FILE DOES INCLUDE BUNDLE.JS