개요
Axure RP로 드래그 & 드롭을 만드는 방법입니다. 이 내용은 Axure RP 공식 홈페이지에 올라온 내용을 제가 이해한대로 옮겨적은 글입니다.
실습 예제 파일 다운로드
실습을 위해 공식 홈페이지에 있는 예제 파일을 다운로드하시기 바랍니다.
예제 파일 다운로드
이미지를 dynamic panel로 변환하기
예제 파일 중, Drag and Drop 페이지를 엽니다. 캔버스에는 네 개의 이미지 위젯과 휴지통 아이콘이 있습니다. 이번 실습에서는 이미지를 휴지통으로 드래그하여 삭제하는 인터랙션을 만들 것입니다. 드래그 이벤트는 오직 dynamic panel에만 적용할 수 있기 때문에 이미지 위젯을 모두 dynamic panel로 변환해야 합니다. 이를 위해, 각각 이미지 위젯에서 우클릭하여 Convert to Dynamic Panel을 선택합니다.
Dynamic panel을 드래그하여 이동시키기
dynamic panel 중 하나를 선택하여 PROPERTIES 탭에서 OnDrag를 클릭하여 새로운 케이스를 추가합니다.
Case Editor에서 Move 액션을 선택하고, Confugure actions에서 This Widget에 체크합니다. 아래쪽의 Move 드롭다운 박스에서 with drag로 선택돼 있는지 확인합니다. OK를 눌러 저장합니다.
드래그가 시작되었을 때 dynamic panel을 화면 가장 위로 올리기
dynamic panel이 선택된 상태에서 다시 PROPERTIES 탭에 있는 OnDragStart를 더블클릭하여 케이스를 추가합니다.
Case Editor에서 Bring to Front를 선택하고 Configure actions에서 This Widget에 체크합니다. 이렇게 하면 dynamic panel을 드래그할 때 브라우저의 여러 요소 중 가장 위에 panel이 배치됩니다. OK를 눌러 저장합니다.
휴지통에 dynamic panel을 드롭했을 때 사라지게 하기
dynamic panel이 선택된 상태에서 다시 OnDragDrop을 더블클릭하여 케이스를 추가합니다.
Case Editor에서 Add Condition 버튼을 눌러 Condition Builder를 띄웁니다. 첫 번째 드롭다운 박스에서 area of widget을 선택하고 마지막 드롭다운 박스에서 Recycle Bin을 선택합니다. OK를 눌러 저장합니다.
다시 Case Editor에서 Hide를 선택하고 Configure actions에서 This Widget에 체크합니다. OK를 눌러 저장합니다.
dynamic panel을 휴지통 이외의 영역에 드롭하면 시작 위치로 돌아가게 만들기
dynamic panel이 선택된 상태에서 OnDragDrop을 다시 더블클릭하여 두번째 케이스를 추가합니다. Case Editor에서 Move 액션을 선택하고 Configure actions에서 This Widget에 체크합니다. 아래쪽의 Move 드롭다운 박스가 to x,y before drag로 설정되어 있을 것입니다. OK를 눌러 저장합니다.
이렇게 케이스를 두 개를 설정하면 두 번째 케이스는 자동으로 Else If True 컨디션이 적용됩니다.
다른 이미지 위젯에도 케이스 복사해 붙여넣기
나머지 위젯에서 위에서 적용한 케이스를 모두 새로 만들 필요없이 현재 만든 케이스를 복사해 붙여넣을 수 있습니다. 각 액션 위에서 마우스 우클릭하여 Copy하고 다른 위젯의 해당 액션에 붙여 넣습니다.
미리보기
Preview 버튼을 눌러 미리보기합니다.