jquery 이미지 클릭 시 좌표 위치 얻기 + 태그 등록 3 -끝-

여러분들의 모든 말씀이 옳습니다. 많이 가르쳐 주세요...!

 

작업 내용

• 1. 이미지가 존재하는 DIV가 있다
• 2. 해당 이미지를 클릭하였을 경우 이미지에 대한 위치정보를 가져온다 - (저번에 썼음)
• 3. 필요한 값을 별도의 입력폼으로 입력받아 해당 위치에 플로팅한다. - (어제 썼음)
• 4. 플로팅된 리스트를 나열하여 수정 OR 삭제가 되도록 한다. - (오늘 내용)

어제 작성한 글을 통해서 이미지 위에 해당 태그를 올리는 것 까지 작업해두었다

허나 문제는 픽셀로 top과 left를 잡아 올리면 디바이스에 따라 이미지 width 와 height가 바뀔시 엄한곳을 찍는다는것...!!

px로 css 적용시키지 말고 계산해서 %로 변경하세용...

 

오늘은  리스트표시 & 태그 내용 수정 및 삭제를 할 수 있도록 작업

태그 리스트를 표시 할 공간을 만들어주기 위해 어제 소스부분에서 HTML 수정 

기존 입력폼인 inputArea 위에 tagResultDiv라는 DIV를 만들고 자식으로 ul을 생성하였다.

입력버튼을 통해 태그를 작성하면, 이곳에 리스트를 뿌려줄 생각

 

해당 리스트와 이미지 위에 태그를 매칭할 방법은 여러가지가 있겠지만, 간단하게 카운팅을 통해 data속성에 index를 부여하여 연결시키기로 하였다.

위 캡쳐에서는 빠졌지만 전역변수인 resultCnt를 선언하였고 기본값은 0으로 주었다.

이제 입력버튼을 누름과 동시에 li 엘리먼트를 생성하여 내용이 담길 input 엘리먼트와 수정, 삭제를 담당할 버튼 엘리먼트를 담아 result 부분에 붙여 보여준다. 

모든 작업이 끝나면 resultCnt를 늘려 data속성에 부여시킬 인덱스가 겹치지 않게 해주었다.

 

수정 및 삭제는 data-index 라는 data속성을 통해 매칭하여 처리하였다.

동적으로 생성된 수정 삭제 버튼이므로 document를 통해 클릭이벤트를 바인딩 했다

 

대망의 결과물!

 

다음에는 인피니티 스크롤 (모바일 위아래 양방향) 작업이 필요하니까 그거 써야징

 

2023.02.06 - [웹개발] - jquery 이미지 클릭 시 좌표 위치 얻기 + 태그 등록 1

2023.02.07 - [웹개발] - jquery 이미지 클릭 시 좌표 위치 얻기 + 태그 등록 2