Question

使用JavaScript的全新/新手，并尝试执行简单的拖放功能。由于某种原因，此插件根本无法正常工作，因此添加了console.log来检查网站是否能识别出正在发生的事情，即使在那里也不会反弹。我在html端具有“可拖动”和“可拖放”元素。

import React, { Component } from "react";
import { Helmet } from "react-helmet";
import Formal from "./AdditionAdd/Formal";
import { withTranslation } from "react-i18next";
import config from "../../Main";

import Swal from "sweetalert2";
import axios from "axios";

let authToken = localStorage.getItem("Token");
class EditCar extends Component {
  constructor(props) {
    super(props);
    this.state = {
 
      car_photo: [
        {
          category: "",
          sub_category: "",
          file: null,
        },
      ],
     
    };

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleImage = this.handleImage.bind(this)
  }

 
  handleSubmit(e) {
    e.preventDefault();
    let form_data = new FormData();
    const data = {    
      car_photo: this.state.car_photo.forEach((item) => {
        form_data.append("file", item.file);
        form_data.append("category", item.category);
        form_data.append("sub_category", item.sub_category);
      }),
      // [...this.state.car_photo],
    };

    axios({
      method: "PUT",
      url: `${config.apiUrl.car}${this.props.match.params.pk}/profile/`,
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: "Bearer " + JSON.parse(authToken),
      },

      data,
    })
      .then((res) => {
       console.log("success")
      })
      .catch((err) => {
       console.log("error")
        });
      });
  }


  async handleImage(e, index) {
    if (["file"].includes(e.target.name)) {
      let cats = [...this.props.doc];
      cats[index][e.target.name] = e.target.files[0];
      await this.setState({
        cats,
      });
    } else {
      this.setState({ [e.target.name]: e.target.files[0] });
    }
  }

  


  render() {
   

    const { t } = this.props;

    return (
      <div id="registration" className="modal">
        <a href="# " rel="modal:close" className="float-right text-dark ">
          <img src={cross} alt="Cross" style={{ height: "1.1em" }} />
        </a>
        <p className="mod" style={{ marginTop: "10px" }}>
          {t("vehicle_registration").toUpperCase()}
        </p>
        <hr></hr>

        <div className="file_upload" style={{ marginTop: "25px" }}>
          <form onSubmit={this.props.submit1}>
            {this.state.car
              .map((inputField, index) => (
                <div className="row">
                  <div className="form-group">
                    <select
                      name="sub_category"
                      class="form-control donn"
                      value={inputField.sub_category}
                      onChange={(e) => {
                        this.props.change(e, index);
                      }}
                      style={{ width: "220px" }}
                    >
                      <option value="" selected display hidden>
                        Select Category
                      </option>
                      <option value="Registration Documentation">
                        Registration Documentation
                      </option>
                      <option value="Plate Number Documentation">
                        Plate Number doc
                      </option>
                    </select>
                  </div>

                  
                  <div class="form-group">
                    <input
                      type="file"
                      name="file"
                      onChange={(e) => {
                        this.props.image(e, index);
                      }}
                      class="form-control-file"
                      id="exampleFormControlFile1"
                    />
                  </div>
                </div>
              ))}

            <a
              href="# "
              onClick={this.props.add}
              className="p font-weight-bolder"
              style={{ color: "#b71c1c" }}
            >
              Add Photos
            </a>

            <div style={{ marginTop: "70px" }}>
              <center>
                <button
                  type="submit"
                  value="Get Data"
                  className="btn btn-login text-white font-weight-bolder boxx "
                  id="button1"
                  style={{
                    height: "40px",
                    fontSize: "13px",

                    width: "200px",
                    background: "rgba(183, 28, 28, 1)",
                    border: "none",
                    color: "white",
                    margin: "auto",
                  }}
                >
                  SAVE
                </button>
              </center>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

export default withTranslation()(EditCar);

有什么想法吗？

Br，约翰尼

Answer 1

它工作正常，但是您有错字。您的函数称为带有camelCase的dragStart（），然后调用不存在的dragstart

const draggableElements = document.querySelectorAll(".draggable");
const droppableElements = document.querySelectorAll(".droppable");

draggableElements.forEach(elem => {
    elem.addEventListener("dragstart", dragstart);
});

function dragstart(){
console.log("dragging");
}

<div style="width:100px;height:100px;background-color:red;" class="draggable" draggable="true"></div>

使用JavaScript拖放功能

1 个答案: