웹 페이지의 표 행을 드래그 가능하게 만들려면 어떻게합니까?
웹 페이지에 사용자가 행을 재정렬 해야하는 테이블이 있습니다. 사용자가 행을 드래그하여 순서를 바꾸도록 할 생각이었습니다. 그러나 사용자에게 그렇게 할 수 있음을 어떻게 알릴 수 있습니까? 받은 편지함의 각 이메일에 대해 Gmail과 같은 점이나 세로선이있는 첫 번째 열로 빈 셀을 만들어야합니까? 그런 이미지를 어디서 얻을 수 있습니까? 커서 또는 "이동"커서에 "손 잡기"아이콘을 사용합니까? 테이블 또는 "잡기 영역"위로 마우스를 가져 가면서 커서를 표시합니까? 사용자가 행의 일부를 끌어서 끌 수있게합니까?
37signals ' Basecamp 이 작업을 훌륭하게 수행합니다.
항목 위에 마우스를 올리면 항목 왼쪽에 컨트롤이 나타납니다. 컨트롤 중 하나는 위쪽/아래쪽 화살표입니다. 해당 컨트롤 위로 마우스를 가져 가면 마우스 커서가 이동 커서로 바뀝니다. 마우스 버튼을 누르고 있으면 잡은 품목의 위치가 마우스의 위치에 해당하는 수직 축에서 이동합니다. 마우스 버튼을 놓으면 항목이 가장 가까운 위치에 놓입니다. 드래그되는 항목의 위치는 화면에서 지속적으로 업데이트되므로 위치를 알 수 있습니다.
Gmail의 할 일 기능은 항목 위에 마우스를 올릴 때 왼쪽에 드래그 표면을 표시하여 조금 다르게 처리합니다. 드래그 표면 위로 마우스를 가져 가면 커서가 손 모양 아이콘 (손 모양 아이콘이 아닌 닫힌 손 모양)으로 바뀝니다. 추가 동작은베이스 캠프와 동일합니다.
이 패턴에 대한 자세한 정보는 Yahoo 디자인 패턴 라이브러리를 참조하고 흥미로운 순간 스토리 보드 그리드 를 참조하십시오.
레이아웃이 과밀하지 않은 한 힌트를 곱하면 사용 가능한 기능을 파악하는 데 도움이됩니다.
드래그 핸들 외에도 테이블 상단 근처에 "행을 드래그하여 재정렬"캡션을 추가 할 수 있습니다.