mouse drag select 관련 모듈을 github에서 검색하면 most stars를 기록한 daybrush님의 selecto 가 검색된다.
네이버 front 개발자분인데 활동도 활발히하시고 오픈 소스도 많이 올려 놓으셨다. selecto 모듈도 언어별로 샘플을 만드시고, 그저 감사히 쓸 뿐이고 이분의 능력에 경외를. 이런게 개발이고 개발자의 올바른 모습인데.
예제도 많이 올려놓으셨는데 그 예제를 바탕으로 select 했을때 값을 배열에 담는 간단한 나만의 예제 소스를 제작해봤다. 처음에 연동하다가 잠깐 해맨 부분이 selecto 모듈을 연동하고 css를 컨트롤 해줘야 한다는 점. css 컨트롤로 해당 아이템이 선택되었다는걸 표시해 줘야 한다. 그리고 아래 예제 소스 버전은 배열에 값을 담고 다시 초기화하는 부분이 완벽하지는 않다. 앞으로 개선 예정.
//모듈 설치
yarn add react-selecto//App.js
import { useEffect, useState } from 'react';
import Selecto from "react-selecto";
import "./style.css";function App() {
const list = []; for (let i = 0; i < 60; ++i) {
list.push(i);
}
const [val, setVal] = useState([]); useEffect(() => {
console.log(val)
},[val])return (
<>
<Selecto
dragContainer={".container"}
selectableTargets={[".list"]}
hitRate={100}
selectByClick={true}
selectFromInside={true}
ratio={0}
onSelect={e => {
e.added.forEach(el => {
el.classList.add("selected");
setVal(prev => [...prev, el.getAttribute("k")])
});
e.removed.forEach(el => {
el.classList.remove("selected");
setVal([])
});
}}
></Selecto> <div className="container">
{list.map(i => <div className="list" key={i} k={i}>{i}
</div>)}
</div>
</>
);
}//style.css
.container {
padding: 100px;
margin: 50px;
display: flex;
flex-direction: column;
border: 1px solid gray;
width: 20%;
height: 100%;
justify-content: left;
align-items: center;
}
.list {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid blue;
width: 100px;
height: 50px;
font-weight: bold;
}
.selected {
background: #4af;
}
//참조
