it-swarm-korea.com

끌어서 놓기 작업의 놓기 부분에 대한 일반적인 관용구는 무엇입니까?

나는 D % D 작업의 나머지 절반 인 하락에만 관심이 있습니다. 떨어 뜨릴 수있는 사용자와 의사 소통하는 일반적인 관용구는 무엇입니까? 그리고 어떤 것이 가장 좋고 어떤 상황에 있습니까?

특히 드래그가 발생하기 전과 드래그 후에 사용자에게 무언가를 전달하는 것을 알고 싶습니다. 시각적이거나 '촉각 적'일 수 있습니다 (마우스 커서 변경).

drag-n-dropidioms
12
shemnon
  • 가능한 드롭 대상을 나타냅니다
  • 결과의 실시간 미리보기 표시
  • 실시간으로 끌고있는 것을 표시

alt text

  • 어딘가에 무언가를 떨어 뜨릴 수 없다면 커서 근처에 팝업으로 사용자에게 이유를 설명하십시오.

alt text

  • 드롭 대상을 크게 유지하십시오! 드래그 앤 드롭은 이미 프리츠의 법을 심각하게 위반합니다. 악화시킬 필요가 없습니다.
5
Robert Fraser

드롭 할 수있는 개요를 보여주는 앱을 보았습니다.

이것은 wordpress 위젯 페이지에서 온 것입니다.

Wordpress widget page
(출처 : srulytaber.com )

10
Sruly

일반적인 접근 방식은 다른 모든 항목 위에 커서를 놓을 수없는 커서로 바꾸는 것입니다.

논리는 다음과 같습니다.

  1. 드래그를 시작하십시오.
  2. 커서를 "놓을 수 없음"으로 돌립니다.
  3. 드래그하는 동안 드롭을 허용 할 수있는 것이 있는지 확인한 다음 커서를 "삭제 가능"으로 바꿉니다.
  4. 드롭 앤 리셋 커서.

참고 : 필자는 이것을 옹호 할 필요는 없지만 끌어다 놓기 작업 중이며 드롭이 유효한 위치를 나타냅니다.

7
ChrisF

사용자가 항목을 드래그하는 즉시 놓기 위치를 약간 강조 표시 할 수 있습니다. 이렇게하면 드롭 위치에주의를 끌 수 있습니다.

이것에 대한 전제 조건은 당연히 드래그 할 수있는 것을 보여 주어야합니다. 이 질문에 대한 답이 for that.

5
Gamlor

드롭 대상이 선형 배열 객체 세트 내에있는 경우가 있습니다. 항목이 삭제 된 후 놓기 대상 뒤에 오는 객체는 새 객체를위한 공간을 만들기 위해 이동합니다. 이 경우 공간을 만들기 위해 분리 할 두 개체 사이에 삽입 지점은 일반적으로가는 선으로 표시됨입니다.

예를 들어, 마우스를 사용하는 거의 모든 GUI에서 텍스트를 선택하여 문서의 한 부분에서 다른 부분으로 끌 수 있습니다. 삽입 점은 두 문자 사이에가는 선으로 표시됩니다.

앞에서 설명한 Netflix queue의 경우도 마찬가지입니다. 가는 선 외에도 Netflix는 검은 색 화살표를 사용하여 영화가 어디로 갈지를 나타냅니다.

 Thundercats: Season 1: Vol. 1: Disc 3     
 .....................................     
 Thundercats: Season 1: Vol. 1: Disc 4
>------------------------------------- 
 Thundercats: Season 1: Vol. 1: Disc 5
 .....................................
 Thundercats: Season 1: Vol. 1: Disc 6

드래그하는 동안 스크린 샷을 얻는 방법을 알 수 없습니다.

3
Patrick McElhaney

제거를위한 일반적인 워크 플로우는 다음과 같습니다.

repeat while mouse is down

    dragEnter -> mouse pointer has moved into some new area.
                 Highlight the area if the dragged data is valid for dropping into it,
                 adjust cursor (forbidden, copy, symlink, or move)
                 adjust the drag image (e.g. when dragging from icon view in file picker
                 to list view in another file picker, now's the time to animate the
                 drag image to look like the list view items would when dropped.

    dragLeave -> Undo any previous highlight.

end repeat

if we were over a valid drop location
    drop
else
    show an animation of the drag image snapping back to its
         point of Origin to make it clear the drag was canceled.
end if

Undo any previous highlight.

일반적인 드롭 하이라이트 유형은 다음과 같습니다.

  • 컨테이너 주위의 윤곽선 (예 : 스크롤보기)으로 올바른 놓기 대상임을 나타냅니다.
  • 항목 사이 또는 이후에 항목을 놓을 목록 항목 또는 텍스트 문자를 나타내는 삽입 표시
  • 드롭을 나타 내기 위해 아이콘의 선택된 변형 (또는 폴더 아이콘의 "폴딩 된 오픈"변형)은 항목이 inside (종료 전 또는 후가 아님)임을 나타냅니다.

삽입 표시는 항목 순서를 자유롭게 다시 정렬 할 수있는 목록뿐만 아니라 정렬 된 목록 (예 : 정렬 된 목록에서 두 파일 사이 또는 두 파일 사이의 드롭은 완벽하게 유효하지만 정렬 후 파일이 더 아래로 표시됨을 나타냅니다.

완전성을 위해 끌기의 일반적인 워크 플로는 다음과 같습니다.

detect whether a click-and-hold or click-and-move is really intended to be a drag:
 - Is it obvious? (e.g. dragging a file by its icon -- there is nothing else you can do
 - Or: Wait for a while, has the mouse moved by at least 4 pixels in some direction
       and has the mouse still not been released? (Accounts for most peoples' less-than-pefect motor skills
 - Or: Is the drag in a certain direction that doesn't make sense for anything else?
       (E.g. dragging sideways over text may be an attempt at a new selection,
       OTOH a vertical drag > 4px on a selection is pretty guaranteed to be a drag attempt.

Set up a drag image that is attached to the mouse. This image usually looks exactly
    like a 70% opaque version of the selection (giving the illusion you're moving
    the selection) and if you haven't moved the mouse yet, should invisibly overlay
    the actual selection. (I.e. move it relative to the mouse, don't center it
    under the mouse)

Start the drag! (following this we do the workflow for dropping)

(적어도 이것은 최신 Mac OS X 앱에서 드래그 앤 드롭이 일반적으로 발생하는 방식이지만 드롭 중에 드래그 이미지를 업데이트하는 것은 상당히 새로운 일입니다)

2
uliwitness