英文:
Preserve the size of dragged item while dragging it over another item in react
问题
我正在创建一个应用程序,可以使用拖放功能对不同的句子进行排序,使用React。我的问题是当较小的项目被拖动到较大的项目上时,较小的项目会被拉伸。当较大尺寸的项目被拖动到较小尺寸的项目上时,较大的项目会收缩。
我需要在拖动时保持项目的大小不变。
有任何想法如何实现吗?
我的代码如下:
App.jsx
import React, { useState, useEffect } from 'react';
import { DndContext, closestCenter, useTransform } from '@dnd-kit/core';
import {
arrayMove,
SortableContext,
verticalListSortingStrategy
} from '@dnd-kit/sortable';
import 'bootstrap/dist/css/bootstrap.min.css';
import { SortableItem } from './SortableItem.jsx';
import './App.css';
function App() {
const [ranking, setRanking] = useState([
"我不明白为什么人们不接受,无论如何,男孩都会是男孩,男人都会是男人",
"她就是个话题制造机。",
"不要像个胆小鬼。",
"男人比女人开车技术更好。",
"上帝是个男的。"
]);
function handleDragEnd(event) {
console.log('拖动');
const { active, over } = event;
console.log('激活:' + active.id);
console.log('覆盖:' + over.id);
if (active.id !== over.id) {
setRanking((items) => {
const activeIndex = items.indexOf(active.id);
const overIndex = items.indexOf(over.id);
console.log(arrayMove(items, activeIndex, overIndex));
return arrayMove(items, activeIndex, overIndex);
});
}
}
return (
<div>
<DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
<h3 style={{ color: 'black', fontWeight: 'bold' }} align="center">
将以下句子按照最性别歧视到最不性别歧视的顺序排列。
</h3>
<div className="frame">
<SortableContext items={ranking} strategy={verticalListSortingStrategy}>
{ranking.map((rank) => (
<SortableItem key={rank} id={rank} className="sortable-item" />
))}
</SortableContext>
<div className="button" style={{ display: 'flex', justifyContent: 'center' }}>
<button
className="btn submit-button"
align="center"
onClick={(e) => {
e.preventDefault();
console.log(ranking);
}}
>
提交
</button>
</div>
</div>
</DndContext>
</div>
);
}
export default App;
SortableItem.jsx
import React from "react";
import Card from 'react-bootstrap/Card';
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
export function SortableItem(props){
//props.id
const {
attributes,
listeners,
setNodeRef,
transform,
transition
} = useSortable({id: props.id});
const style = {
transform: CSS.Transform.toString(transform),
transition,
marginBottom: "1rem",
};
return (
<div
ref={setNodeRef}
style={style}
{...attributes}
{...listeners}
className="hover-card"
>
<Card body>{props.id}</Card>
</div>
);
}
我尝试使用了useTransform,useRef,为卡片提供了尺寸,还尝试使用了响应式的CSS,但效果不如预期。
PS,我对ReactJS非常新手。
谢谢
Sitashma
英文:
I am creating an app where different sentences can be ranked using drag and drop feature using react. My problem is whenever an item of smaller size is dragged over item of larger size, the smaller item streches. When an item with larger size is dragged over item with smaller size , the larger item shrinks.
I need to preserve the size of the dragged item when it is dragged.
Any idea how it can be done?
my code is as follow:
App.jsx
import React, { useState, useEffect } from 'react';
import { DndContext, closestCenter,useTransform } from '@dnd-kit/core';
import {
arrayMove,
SortableContext,
verticalListSortingStrategy
} from '@dnd-kit/sortable';
import 'bootstrap/dist/css/bootstrap.min.css';
import { SortableItem } from './SortableItem.jsx';
import './App.css';
function App() {
const [ranking, setRanking] = useState([
"I dont understand why people dont accept that no matter what,Boys will be boys and men will be men",
"She is such a drama queen.",
"Don't be a sissy.",
"Man is a better driver than women.",
"God is a man."
]);
function handleDragEnd(event) {
console.log('Drag');
const { active, over } = event;
console.log('Active:' + active.id);
console.log('Over :' + over.id);
if (active.id !== over.id) {
setRanking((items) => {
const activeIndex = items.indexOf(active.id);
const overIndex = items.indexOf(over.id);
console.log(arrayMove(items, activeIndex, overIndex));
return arrayMove(items, activeIndex, overIndex);
});
}
}
return (
<div>
<DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd} >
<h3 style={{ color: 'black', fontWeight: 'bold' }} align="center">
Rank the following sentences from most to least sexist.
</h3>
<div className="frame">
<SortableContext items={ranking} strategy={verticalListSortingStrategy}>
{ranking.map((rank) => (
<SortableItem key={rank} id={rank} className="sortable-item" />
))}
</SortableContext>
<div className="button" style={{ display: 'flex', justifyContent: 'center' }}>
<button
className="btn submit-button"
align="center"
onClick={(e) => {
e.preventDefault();
console.log(ranking);
}}
>
Submit
</button>
</div>
</div>
</DndContext>
</div>
);
}
export default App;
SortableItem.jsx
import React from "react";
import Card from 'react-bootstrap/Card';
import { useSortable } from "@dnd-kit/sortable";
import {CSS} from "@dnd-kit/utilities";
export function SortableItem(props){
//props.id
const {
attributes,
listeners,
setNodeRef,
transform,
transition
} = useSortable({id: props.id});
const style = {
transform: CSS.Transform.toString(transform),
transition,
marginBottom: "1rem",
};
return (
<div
ref={setNodeRef}
style={style}
{...attributes}
{...listeners}
className="hover-card"
>
<Card body>{props.id}</Card>
</div>
);
}
I tried using useTransform, useref, giving dimension to the card, also tried using responsive css but it didnt work as expected.
PS, i am very new to reactjs
Thank you
Sitashma
答案1
得分: 1
您可以使用 useTransform
钩子自定义可排序项的变换和过渡属性。此钩子允许您根据元素的位置或状态应用自定义变换。例如,您可以像这样修改您的 SortableItem.jsx
文件:
import React from "react";
import Card from "react-bootstrap/Card";
import { useSortable, useTransform } from "@dnd-kit/sortable";
export function SortableItem(props) {
const {
attributes,
listeners,
setNodeRef,
transform,
transition,
isDragging,
} = useSortable({ id: props.id });
const style = useTransform(
transform,
(transform) => {
if (isDragging) {
return {
...transform,
width: "auto",
height: "auto",
margin: "1rem",
boxShadow: "0 0 10px rgba(0,0,0,0.2)",
};
}
return {
...transform,
transition,
};
},
[isDragging]
);
return (
<div
ref={setNodeRef}
style={style}
{...attributes}
{...listeners}
className="hover-card"
>
<Card body>{props.id}</Card>
</div>
);
}
这段代码使用 useTransform
钩子来根据拖动状态应用自定义样式变换,以及应用过渡效果。
英文:
You can customize the transform and transition properties of the sortable items using the useTransform
hook. This hook allows you to apply custom transformations to draggable elements based on their position or state. For example, you can modify your SortableItem.jsx
file like this:
import React from "react";
import Card from "react-bootstrap/Card";
import { useSortable, useTransform } from "@dnd-kit/sortable";
export function SortableItem(props) {
const {
attributes,
listeners,
setNodeRef,
transform,
transition,
isDragging,
} = useSortable({ id: props.id });
const style = useTransform(
transform,
(transform) => {
if (isDragging) {
return {
...transform,
width: "auto",
height: "auto",
margin: "1rem",
boxShadow: "0 0 10px rgba(0,0,0,0.2)",
};
}
return {
...transform,
transition,
};
},
[isDragging]
);
return (
<div
ref={setNodeRef}
style={style}
{...attributes}
{...listeners}
className="hover-card"
>
<Card body>{props.id}</Card>
</div>
);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论