Reactスクロール後に位置がずれています
テーブルの行をドラッグ可能にするために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);
ページを下にスクロールしたときに、ドラッグ可能なオブジェクトがずれてしまう理由を誰かが見つけてくれることを願っています。
おそらく答えには遅すぎるかもしれませんが、誰かにとっては、それは役に立つかもしれません。よく見ると、スクロールするとオフセットが表示されます。これがスタイルが壊れる理由です。解決策としては、スクロールコンテナーについて考える必要があります。ウィンドウではなくHTMLElementにスクロールを追加する場合は、これを確認する必要があります 例 。この問題はreact-beautiful-dnd自体と更新されたバージョンで修正されます。
私は同じ問題に遭遇しました。私の問題は、droppable（list）が、スクロール可能な（つまり、オーバーフロー：スクロール）であるmainコンテナーの中にあることでした。
私はドロップ可能オブジェクトをスクロール可能に変換する代わりにmaincontainerによって問題を解決しました
問題があった例
.main {
background: #eee;
padding: 3rem;
height: 200px;
overflow-y: scroll;
}
.droppable {
padding: 1rem;
background: #aaa;
}
.draggable {
margin: 0.5rem 0;
padding: 1rem;
background: #ccc;
}<div class="main">
<div class="droppable">
<div class="draggable">
<span class="text"> item</span>
</div>
<div class="draggable">
<span class="text"> item</span>
</div>
<div class="draggable">
<span class="text"> item</span>
</div>
</div>
</div>問題が解決した例
.main {
background: #eee;
padding: 3rem;
height: 200px;
}
.droppable {
padding: 1rem;
background: #aaa;
height: 180px;
overflow-y: scroll;
}
.draggable {
margin: 0.5rem 0;
padding: 1rem;
background: #ccc;
}<div class="main">
<div class="droppable">
<div class="draggable">
<span class="text"> item</span>
</div>
<div class="draggable">
<span class="text"> item</span>
</div>
<div class="draggable">
<span class="text"> item</span>
</div>
</div>
</div>ドロップ可能なコンテナをmainコンテナより短くするために、CSSだけで変更が行われ、ドロップ可能なオブジェクトにovervlow-y:scrollが追加されました