Редактировать 1
Основываясь на последующих комментариях ОП, я понял, что они также хотели, чтобы второй выбранный элемент зависел от того, насколько близко элемент находится к позиции щелчка . Я сделал несколько обновлений.
Смотрите обновленную React Песочницу с кодом здесь
App.jsx
import React, { useState } from "react";
import "./styles.css";
const ElementsList = () => {
// 1. List of Items, they could be anything
const items = ["Elem 1", "Elem 2", "Elem 3", "Element 4", "Element 5"];
// 2. Track the selected items in state
const [selectedItems, setSelectedItems] = useState([]);
const handleClick = (e, index) => {
// 7. Extract the click position and element height from the event target.
const nextItems = getNextSelections({
currentIndex: index,
totalItems: items.length,
elementHeight: e.currentTarget.getBoundingClientRect().height,
distanceFromTop: e.clientY - e.currentTarget.getBoundingClientRect().top
});
// 4. Do whatever you want with the selected items :), then update state
setSelectedItems(nextItems);
};
return (
<div className="List">
{items.map((value, index) => (
<div
key={value}
className={`myClass ${
// 5. Conditionally set selected class if index is present in selected Items array
selectedItems.includes(index) ? "selected" : ""
}`}
// 6. Capture the click event and the index of the selected item
onClick={e => handleClick(e, index)}
>
{value}
</div>
))}
</div>
);
};
export default function App() {
return (
<div className="App">
<h1>2 Items Selector</h1>
<ElementsList />
</div>
);
}
Помощник getNextSelections
// Helper to get Select items based on mouse position
const getNextSelections = ({
currentIndex, // Index of the clicked Item
totalItems, // Total number of items in the list
elementHeight, // Height of the bounding rectangle of the element
distanceFromTop // Distance of Mouse click postion from top of boudning rectangle of the element
}) => {
// A. Return first and second item if first item is clicked, exit early
if (currentIndex <= 0) return [0, 1];
// B. Return last and second last if last item is clicked and exit early
if (currentIndex === totalItems - 1) return [currentIndex - 1, currentIndex];
// C. If clicked in top half of the element, return previous and current item
if (distanceFromTop < elementHeight / 2) {
console.log("Cicked Next to the Top of Element");
return [currentIndex - 1, currentIndex];
}
// D. Otherwise return current and next item indicies
return [currentIndex, currentIndex + 1];
};
Стили. css
.App {
font-family: sans-serif;
text-align: center;
}
.List {
width: 80%;
margin: 0 auto;
text-align: center;
}
.myClass {
padding: 1rem;
border: solid 4px black;
border-bottom: none;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.myClass.selected {
background: rgb(236, 174, 174);
transition: background 1s;
}
.myClass:last-child {
border: solid 4px black;
}
Я добавил помощника для условной проверки позиции щелчка в верхней части ограничения выбранного элемента. прямоугольник. Следуйте этим допущениям.
- Если щелкнуть первый элемент, просто выберите первый и второй элементы.
[A] - Выберите последний и второй последний элемент, если щелкнуть последний элемент ,
[B] - Для элементов в середине списка выберите предыдущий элемент в качестве второго выбора, если щелчок происходит в верхней половине ограничительного прямоугольника выбранного элемента
[C], в противном случае выберите предыдущий элемент. [D]
Код Песочница: выбор нескольких элементов с помощью мыши. Близость
Изменить 2
В своих комментариях вы говорите список содержит строки и столбцы :( Вы можете расширить помощник для учета горизонтальной близости, используя getBoundingClientRect().left and width, и использовать тот же подход, чтобы выбрать индекс элементов на стороне, ближайшей к щелчку.
Редактировать 3
Удален подход, при котором следующий выбранный элемент не зависит от положения щелчка мыши, но код можно найти в этой Редакции 1 этого поста здесь и в Codesandbox «Несколько элементов выбираются без близости мыши»