javascript - 使用 HTML 拖放调用 axios POST 请求

Question

我正在创建一个看板 - 我有一个拖放系统工作。

响应.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);
}

调用时：

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

但是，我需要与我的drag().

该请求会更新拖动的卡片所在的板列。

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
    }
});

我正在使用parcel捆绑器：

package.json » 脚本

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

我努力了：

• 将我的方法添加到我的index.js（应该调用它的地方，从 导入login.js）
• 直接添加到bundle.js

但是我不断得到：（ Uncaught ReferenceError: sendNewCard is not defined我做了一个在卡片属性中sendNewCard调用的方法。ondrop

我真的很感激这方面的一些帮助，如果需要更多信息，请告诉我——我对此比较陌生，你可能已经想到了。

捆绑.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 渲染的 HTML 文件包含 BUNDLE.JS

标签： javascriptaxioshttprequestparceljskanban