개발 도구 (Development Tools)/Sample Code 3

클릭과 드래그 구분하기

클릭이 가능한 카드형 박스지만, 내부 내용을 드래그해서 복사도 가능하게 하고 싶은 경우. 즉, 같은 박스이지만 내부에서 드래그와 클릭을 구분해서 실행해야 할 경우 사용하는 방법. (아무리 생각해도 사용자 친화적 UI는 아닌 거 같지만 하라면 해야지 뭘 어쩌겠는가...) 방법 1. 클릭 시간을 기준으로 정확하게는 드래그를 구분하는것이 아니라, 클릭 지속시간을 이용하여 판단하는 방법. 마우스를 누르고 있는 시간이 길다면 클릭이 아닌 것으로 판단. 방법 2. 드래그 거리를 기준으로 클릭을 시작한 지점으로부터, 클릭을 해제한 지점까지의 거리를 측정하여 클릭과 드래그를 구분.

배열에서 원하는 객체만 삭제하는 방법

배열에서 원하는 항목을 제거하고 싶은 경우가 꽤나 자주 발생하는데, 그와 관련된 이런저런 내용을 간략히 적어봅니다. 예제 샘플 users라는 배열에는 대충 아래와 같이 이름(userName), 나이(age)등 다양한 정보를 포함한 객체가 담겨져 있다. [ { "no": 1, "userName": "Terry", "age": 50, "gender": "male", "email": "atuny0@sohu.com", "userID": "atuny0", "birthDate": "2000-12-25", "image": "https://robohash.org/hicveldicta.png", "bloodType": "A−", "address": "1745 T Street Southeast", "city": "Wash..

Ionic Framework - reorder(재정렬)

Reorder reorder는 내부의 항목을 끌어다 놓아 해당 그룹 내에서 순서를 변경할 수 있도록 하는 구성 요소입니다. 최근 Ionic을 이용해서 개발을 하고있는데, 다른 언어 샘플 코드는 모르겠고, reorder 페이지의 Vue 샘플 코드를 그대로 사용하면 리스트를 변경할때마다 화면이 멈춰버리는 일이 발생하기에 추후에 또 쓸지 모르니 간단한 해결 방법을 기록해 봅니다. 샘플 코드 Ionic Framework - Reorder {{ item }} checkItems 외부에 따로 수정 같은 이벤트 버튼을 만들어 ion-reorder-group의 :disabled="false" 값을 토글하게 만들면 평소에는 이동을 막고 수정하고 싶을때만 이동할 수 있도록 지정할 수 있습니다. 결과 이런식으로 배열의 순서..

반응형