使用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, 约翰尼
答案 0 :(得分:3)
它工作正常,但是您有错字。您的函数称为带有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>