javascript - 同时点击2个元素？

Question

我有一个场景，用户可以选择 1 个元素 或 2 个元素 来点击
如果用户选择2个元素，他可以通过一次单击选择2个元素，但只能选择其相邻元素
例如:
如果用户点击 Elem 1 容器，下面的容器将被激活或被点击
元素 1 和 元素 2
如果用户单击 Elem 3 容器，下面的容器将被激活或单击
Elem 2 和 Elem 3

此外，如果用户点击了 Elem 2，它将取决于用户点击的最近区域(Y 轴)是否与 Elem 1 或 Elem 3 合作

但不 Elem 1 到 3，因为它们之间有间隙(Elem 2)，并且正如我仅提到的邻居容器。

我正在使用ReactJS

<div class="myClass">
  Elem 1
</div>

<div class="myClass">
  Elem 2
</div>

<div class="myClass">
  Elem 3
</div>

Answer 1

Edit 1

Based on the OP's subsequent comments, I realized they also wanted the second selected item to depend on how close the item is to the click position. I made some updates.

查看更新后的 React Code Sandbox here

<小时/>

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;
}

<小时/>

我添加了一个助手来有条件地检查从所选元素的边界矩形顶部开始的单击位置。遵循这些假设。

1. 如果点击第一项，则只需选择第一项和第二项即可。[A]
2. 如果单击最后一项，则选择最后一项和倒数第二项。 [B]
3. 对于列表中间的元素，如果点击发生在被点击项目边框的上半部分[C]，则选择上一个项目作为第二个选择，否则选择上一个项目。 [D]

Code Sandbox: Multiple Items Select with Mouse Proximity

Edit 2

In your comments you say the list has rows and columns :( You can extend the helper to account for the horizontal proximity using getBoundingClientRect().left and width, and use the same approach to select the index of items to the side closest to the click.

Edit 3

Had removed the approach where the next selected item doesn't depend on the position of the mouse click, but the code can be found in this Revision 1 of this post here and the Codesandbox "Multiple Items Select without Mouse Proximity"