it-swarm-ko.com

그리드에서 행을 수동으로 재정렬하는 방법은 무엇입니까?

사용자가 열에서 자동 정렬을 수행하지 않고 그리드의 요소를 재정렬하고 싶습니다. 그들은 어떤 요소가 첫 번째 요소인지, 어떤 요소가 다른 요소 뒤에 오는지를 선택합니다.

나는 경우에 따라 작동 할 수있는 몇 가지 솔루션을 생각하고 보았습니다.

  • 드래그 앤 드롭 : 섹시하지만 스크롤 또는 페이징이있는 긴 그리드에는 작동하지 않습니다. 또 다른 단점은 보이지 않는다는 것입니다.이 기능을 사용할 수 있는지조차 모를 수도 있습니다. 마지막으로 약간의 손재주가 필요합니다. 그러나 한 번에 둘 이상의 요소를 이동하는 데 사용할 수 있습니다.
  • 위/아래 화살표 : 작은 움직임에는 이해하기 쉽고 사용하기 쉽지만, 마지막 요소를 처음에 움직여야 할 때는 지루합니다. 또한 요소를 몇 단계 이동하면 각 단일 이동 후 해당 화살표를 잡아야합니다. 한 번에 하나의 요소에만 작동합니다.
  • 색인 열 : 사용자가 요소의 위치를 ​​나타내는 숫자를 입력합니다. 사용자가 원하는 절대 위치를 알고있을 때 유용합니다. 이미 존재하는 숫자를 입력하면 어떻게 될지 추측하기가 어렵습니다. 한 번에 하나의 요소에만 작동합니다.

인덱스 열 + 드래그 앤 드롭과 같은 두 가지 기술을 결합하고 싶지만 둘 다의 이점을 얻는 대신 두 가지 단점을 누적하는 것이 두렵습니다.

작동하는 것으로 입증 된 재정렬 기술은 무엇입니까?

5
Mart

Netflix는 대기열에 세 가지 방법을 결합합니다. 끌어서 놓을 수 있지만 특정 행 번호를 지정하거나 클릭하여 맨 위로 이동하십시오.

alt text

내가 접근 한 방식에 대해 흥미로운 점은 사용자가 선택하고 페이지 상단의 아무 곳이나 클릭해야하는 것과는 반대로 각 행에 "상단"아이콘 (녹색으로 동그라미 표시)을 놓았다는 것입니다. 대부분의 웹 앱은 그러한 아이콘이나 버튼을 넣습니다.

귀하의 경우 드래그 앤 드롭을 사용하지만 모든 행에 기어 아이콘을 배치합니다.

alt text

이를 통해 몇 가지 조치가 가능합니다.

  • 사용자는 하나 이상의 행을 끌어서 놓을 수 있습니다

  • 사용자는 여러 행을 선택한 다음 톱니 바퀴 아이콘을 클릭하여 메뉴를 드롭 다운하고 원하는 수의 작업을 수행 할 수 있습니다 (예 : 선택을 맨 위 또는 맨 아래로 이동, 선택한 행 수를 위 또는 아래로 이동 (이 경우 작은 대화 상자가 표시됨), 복사, 잘라 내기 등 사실상 제한이 없습니다.

7
Hisham

가장 먼저해야 할 일은 사용자가 수행하는 빈도입니다.

자주 사용된다면 드래그 앤 드롭을 사용하고 사용자가 특정 목표에 도달하면 페이지를 자동 스크롤하기 위해 그것을 만들려고합니다.

사용자가 무언가를 자주 수행해야하고 이국적인 유형의 상호 작용을 도입하여 더 쉽게 만들 수 있다면 그렇게하는 것이 좋습니다. 학습 곡선은 나중에 유용 할 것이므로 학습 곡선에 문제가 없습니다.

자주 사용하지 않을 경우 위/아래 화살표를 사용하면 종료되지 않지만 명확합니다.

3
ThomPete

위/아래 화살표를 드래그 앤 드롭과 결합했습니다.

어떤 숫자를 추측하거나 미리 해결해야하는 것은 번거로운 일입니다. 또한 코드에서 충돌을 처리 할 수 ​​있고 처리해야하지만 (예를 들어 입력 한 숫자 이상의 숫자를 단순히 증가시키는 것만으로), 대부분의 사용자는 복제 또는 잘못된 번호가 처리됩니다.

위쪽 및 아래쪽 화살표는 짧은 거리에 걸쳐 훨씬 편리한 방법입니다.

더 먼 거리와 여러 항목 이동의 경우 드래그 앤 드롭을 추가 할 수 있습니다. 한 페이지 이상의 거리에서 드래그 앤 드롭의 유용성을 보장하려면 그리드의 자동 스크롤도 구현해야합니다. 즉, 드래그 작업 중 그리드의 위쪽 또는 아래쪽 테두리의 특정 여백 내에서 마우스를 드래그하면 그리드가 자동으로 스크롤됩니다. 정확히 Windows 탐색기가하는 것입니다.

이것을 더욱 증가시키기 위해, 드래그가 "스크롤 민감"영역에 계속있을 때 스크롤 속도가 느리게 시작되고 증가 할 수 있습니다. 그럼에도 불구하고 조심하고 최대 스크롤 속도를 설정하십시오 : 나는 너무 많이 또는 너무 빨리 자동 스크롤을 사용하여 분노를 불러 일으켜 항상 필요한 곳을 지나서 스크롤했습니다.

0
Marjan Venema

Drupal CMS에는 30-50 개 항목의 목록으로 확장하는 비교적 좋은 솔루션이 있습니다. 어떻게 확장되는지는 잘 모르겠습니다.

사이트 "블록"구성은 예입니다. 아래 스크린 샷을 참조하십시오.

  • 각 항목에는 드래그 앤 드롭 작업을 위해 잡을 수있는 4 방향 핸들 이 있습니다.
    손잡이를 드래그 할 수있는 손잡이가 시각적 인 "적합성"을 제공합니다.
  • 목록은 섹션으로 나뉩니다.
    항목에 표시된 콤보 박스에서 항목을 선택하면 항목을 특정 섹션으로 이동할 수 있습니다.

alt text

"끌어다 놓기"방식은 항목을 한 단계 이동하는 화살표를 사용하는 것보다 훨씬 부드럽습니다. JIRA 이 작업을 수행하면 실제로 일을 제대로 처리하는 데 많은 노력이 필요합니다.

0
Bevan

사용자가 시스템을 사용하는 방법에 따라 다릅니다.

  • 행 번호가 의미있는 경우 (예 : 대기열의 위치) 행을 표시하고 편집 가능하게 만들 수 있습니다.

  • "만들기"가 일반적인 조치 인 경우 "위로 이동"단추를 도입하거나 아래쪽으로 이동하십시오.

  • 키보드 단축키와 같은 사용자가 단축키를 추가 및 아래로 추가하는 경우 선택/포커스가 행을 따라 가도록 행을 따라야합니다. 따라서 위쪽 단축키를 3 번 ​​누르면 실제로 행이 3 위로 이동합니다.

  • 위/아래 버튼을 추가 할 수 있습니다. 내 사용자는별로 좋아하지 않습니다 (사용자가 다를 수 있음)

  • 마지막으로, 사용자가 선호하는 행 순서 변경 방법 인 Drag & Drop-내 앱에는 드래그 핸들이 없으며 사용자가 잘 드래그 앤 드롭 할 수 있습니다 (사용자가 다를 수 있음)

그리고 무엇을 하든지 특정 사용자를 대상으로 테스트하고 그들이 어떻게 좋아하는지 확인하십시오.

0
Nir