Я использую react-beautiful-dnd чтобы сделать строки таблицы перетаскиваемыми.
Перетаскивание идет хорошо, но когда я прокручиваю страницу, когда у меня есть перетаскиваемый элемент, он выходит из положения.
Понятия не имею почему.
Также в css ничего странного не найдено.
Я понятия не имею, почему это происходит, и не знаю, как это исправить. Вот пример моей проблемы.
Это мой код:
import update from "immutability-helper";
import * as React from "react";
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
import { WithNamespaces, withNamespaces } from "react-i18next";
import { toastr } from "react-redux-toastr";
import * as HttpHelper from "../../httpHelper";
import { FormState } from "../common/ValidatedForm";
type Props = WithNamespaces & {
id: number;
displayName: string;
type: string;
language: any;
};
interface Fields {
columns: any;
}
type State = FormState<Fields> & {
isLoading: boolean,
canSave: boolean,
isSaving: boolean,
possibleTags: any,
configTagModalActive: boolean,
previewModalActive: boolean,
activeTag: any
};
const getItemStyle = (isDragging: any, draggableStyle: any) => ({
...draggableStyle,
opacity: isDragging ? 1 : 1,
boxShadow: "0px 0px 0px 1px #8b8b8b",
});
const shadowColor = "#a0a0a057";
const Column = (props: any) => {
function findindex(val: any, pt: any) {
const list = pt ? props.possibleTags : props.tags;
return list.findIndex((item: any) => val == item.name);
}
function findindexofhelptext(val: any, pt: any) {
const list = pt;
return list.findIndex((item: any) => val == item.language);
}
return (
<tr ref={props.provided.innerRef} {...props.provided.draggableProps} style={getItemStyle(props.snapshot.isDragging, props.provided.draggableProps.style)} className={"draggablerow " + (props.snapshot.isDragging ? "draggedrow" : "") } key={props.indexnr} data-id={props.index} >
<td {...props.provided.dragHandleProps} style={{width: "50px", textAlign: "center", cursor: "move"}}><i className="fa fa-bars" style={{lineHeight: "40px", fontSize: "24px"}}></i></td>
<td style={{ textAlign: "center", width: "100px" }}>
<input
type="checkbox"
className="flipswitch"
id={props.index}
checked={props.export}
onChange={props.toggleVisible}
/>
</td>
<td style={{width: "350px" }}>
<input
type="text"
name="caption"
id={props.index}
className="form-control"
value={props.caption}
onChange={props.onTextUpdate}
style={{boxShadow: "2px 2px 3px 1px" + shadowColor}}
/>
</td>
<td style={{width: "350px" }}>
<input
type="text"
name="fieldname"
id={props.index}
className="form-control"
value={props.fieldname}
onChange={props.onTextUpdate}
style={{boxShadow: "2px 2px 3px 1px" + shadowColor}}
/>
</td>
<td style={{width: "400px"}}>
<div className="tags-input" style={tagInputStyle}>
{Object.keys(props.tags).map((key, i) =>
<div key={i} className="tag" onClick={props.onConfigButtonClicked} data-id={i} data-parent={props.index}>
{props.tags[i].name} <i className="fa fa-trash" id={props.index} data-key={i} data-name={props.tags[i].name} onClick={props.onDeleteTag} style={{float: "right"}} ></i>
</div>
)}
</div>
</td>
<td style={{ textAlign: "center", width: "100px" }}>
<button onClick={() => props.onDeleteColumn(props.index)} type="button" style={{padding : "8px 16px", boxShadow: "2px 2px 2px 1px" + shadowColor }} className="btn btn-danger btn-rounded"><i className="fa fa-trash"></i></button>
</td>
</tr>
);
};
const reorder = (list: any, startIndex: any, endIndex: any) => {
const result = Array.from(list);
const [removed] = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed);
return result;
};
interface SetColumnsResponse extends HttpHelper.ResponseData { columns: any; }
class CrmConnectorColumns extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.moveColumn = this.moveColumn.bind(this);
this.state = {
isLoading: true,
isSaving: false,
canSave: false,
errorColor: "danger",
fields: { columns: [] },
deleteModalActive: false,
configTagModalActive: false,
previewModalActive: false,
activeTag: {name: "", attributes: [{name: "", value: ""}]},
possibleTags: [
{name: "PRIMARY", status: "new", helptexts: [
{language: "nl", helptext: "Dit is de primary key"},
{language: "en", helptext: "This is the primary key"}
], attributes: [], uses: 1},
{name: "SUBTITLE", status: "new", helptexts: [
{language: "nl", helptext: "Dit is de subtitel van een record"},
{language: "en", helptext: "This is The subtitle of a record"}
], attributes: [], uses: 1},
{name: "URL", status: "new", helptexts: [
{language: "nl", helptext: "De waarde wordt gezien als link."},
{language: "en", helptext: "The value becomes a link."}
], attributes: [
{name: "link", status: "new", helptexts: [
{language: "nl", helptext: "De link krijgt deze waarde. Voorbeeld waarde is \"http://www.google.nl?search=[naam]\". de waarde van \"[naam]\" wordt ingevuld."},
{language: "en", helptext: "The link gets this value. Example value is \"http://www.google.nl?search=[name]\". the value of \"[name]\" gets filled in."}
]}
], uses: undefined},
{name: "TITLE", status: "new", helptexts: [
{language: "nl", helptext: "Dit is de hoofdtitel van een record"},
{language: "en", helptext: "This is the maintitle of a record"}
], attributes: [], uses: 1},
{name: "PHONE", status: "new", helptexts: [
{language: "nl", helptext: "De waarde wordt gezien als telefoonnummer"},
{language: "en", helptext: "The value becomes a phonenumber"}
], attributes: [], uses: undefined},
{name: "BUTTON", status: "new", helptexts: [
{language: "nl", helptext: "Uiterlijk van een knop"},
{language: "en", helptext: "The value becomes a button"}
], attributes: [], uses: undefined},
{name: "EMAIL", status: "new", helptexts: [
{language: "nl", helptext: "De waarde wordt gezien als e-mail adres"},
{language: "en", helptext: "The value becomes a emailaddress"}
], attributes: [], uses: undefined},
{name: "IMAGE", status: "new", helptexts: [
{language: "nl", helptext: "De waarde wordt als afbeelding weergegeven"},
{language: "en", helptext: "The value gets displayed as image"}
], attributes: [], uses: undefined},
{name: "HTML", status: "new", helptexts: [
{language: "nl", helptext: "De waarde wordt gezien als HTML"},
{language: "en", helptext: "The value gets seen as custom HTML"}
], attributes: [
{name: "HTML code", status: "new", helptexts: [
{language: "nl", helptext: "Vul hier je custom HTML code in. De waarde tussen de [] word vervangen door de data."},
{language: "en", helptext: "Enter your custom HTML here. The value between the [] will be replaced for the value."}
]}
], uses: undefined}
]
};
this.onDragEnd = this.onDragEnd.bind(this);
}
onDragEnd(result: any) {
// dropped outside the columns table
if (!result.destination) {
return;
}
let newlist = [...this.state.fields.columns];
newlist = reorder(
newlist,
result.source.index,
result.destination.index
);
Object.keys(newlist).forEach((nr) => {
newlist[parseInt(nr, 10)].index = parseInt(nr, 10);
});
this.setState({ fields: { columns: newlist } });
this.setState({ canSave: true });
}
async componentDidMount() {
console.log("Start select columns");
const fields = await HttpHelper.getJson<Fields>('/${this.props.type}/${this.props.id}/columns');
this.setState(prevState => {
return update(prevState, {
fields: { $set: fields },
isLoading: { $set: false },
});
});
if (this.state.fields.columns == undefined) {
this.setState({ fields: { columns: [] } });
}
for (let i = 0; i < fields.columns.length; i++) {
fields.columns[i].index = i;
}
this.setState({ fields: { columns: fields.columns } });
const newlist = [...this.state.possibleTags];
for (const column of fields.columns) {
for (const tags of column.tags) {
const index = newlist.map((item) => item.name).indexOf(tags.name);
if (newlist[index].uses > 0) {
newlist[index].uses = 0;
}
}
}
this.setState({ possibleTags: newlist });
}
moveColumn(index: any, indexnr: any) {
const cards = this.state.fields.columns;
const sourceCard = cards.find((card: any) => card.index === index);
const sortCards = cards.filter((card: any) => card.index !== index);
sortCards.splice(indexnr, 0, sourceCard);
Object.keys(sortCards).forEach((nr) => {
sortCards[nr].index = parseInt(nr, 10);
});
this.setState({ fields: { columns: sortCards } });
this.setState({ canSave: true });
}
onDragStart = (e: any) => {
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("text/html", e.target.parentNode);
e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
}
ondragOver(e: any) {
e.preventDefault();
}
public render() {
const columns = this.state.fields.columns || [] ;
const { t } = this.props;
let placeholder: any;
if (columns.length < 1) {
placeholder = <tr style={{boxShadow: "0px 0px 0px 1px #8b8b8b", textAlign: "center"}} className={"draggablerow"}><td colSpan={6} >{t("placeholder")}</td></tr>;
}
return (
<form>
<div className="App">
<main>
<button onClick={this.onSubmit} className="btn btn-primary" type="submit" style={{float: "right", boxShadow: "2px 2px 3px 1px" + shadowColor}} disabled={!this.state.canSave || this.state.isSaving}>{this.state.isSaving ? <i className="fa fa-spinner fa-spin"></i> : ""} {this.props.t("update")}</button>
<button onClick={this.onPreviewButtonClicked} type="button" className="btn btn-primary" style={{float: "right", boxShadow: "2px 2px 3px 1px" + shadowColor, marginRight: "5px"}} >Preview</button><br/><br/>
<DragDropContext onDragEnd={this.onDragEnd}>
<table className="col-8 table columns" style={{tableLayout: "auto"}} >
<thead className="" style={{border: "2px solid #1b2847", background: "#1b2847", color: "white"}}>
<tr>
<th colSpan={2} style={{textAlign: "center"}}>
<button onClick={this.onAddColumn} disabled={columns.length > 14 ? true : false} type="button" style={{padding : "8px 16px", boxShadow: "2px 2px 3px 1px" + shadowColor }} className="btn btn-primary btn-rounded"><i className="fa fa-plus"></i> </button>
</th>
<th>{t("displayname")}</th>
<th>Element</th>
<th>Tags</th>
<th></th>
</tr>
</thead>
<Droppable droppableId="droppable" direction="vertical">
{(provided: any) => (
<tbody ref={provided.innerRef}>
{Object.keys(columns).map((element, key) => (
<Draggable key={"draggable" + key} draggableId={element} index={key}>
{(provided, snapshot) => (
<Column
key={"column" + key}
indexnr={key}
toggleVisible={this.toggleVisible}
onTextUpdate={this.onTextUpdate}
onDeleteColumn={this.onDeleteColumn}
onDeleteTag={this.onDeleteTag}
onAddTag={this.onAddTag}
possibleTags={this.state.possibleTags}
onConfigButtonClicked={this.onConfigButtonClicked}
onPreviewButtonClicked={this.onPreviewButtonClicked}
onClosePreview={this.onClosePreview}
provided={provided}
snapshot={snapshot}
language={this.props.language}
{...columns[key]}
/>
)}
</Draggable>
))}
{provided.placeholder}
</tbody>
)}
</Droppable>
</table>
</DragDropContext>
</main>
</div>
</form>
);
}
}
export default withNamespaces(["crmConnectorColumns", "Common"])(CrmConnectorColumns);
Я надеюсь, что кто-то может выяснить, почему мое перетаскиваемое устройство перестает работать, когда я прокручиваю страницу вниз.