JS4 드래그 앤 드롭 리스트 구현 jquery-ui를 사용해서 구현해 보았다. https://jqueryui.com/sortable/#default Sortable | jQuery UI Sortable Reorder elements in a list or grid using the mouse. Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable prope jqueryui.com 위 사이트를 들어가면 예제 소스를 볼 수 있다. view source 버튼을 .. 2024. 3. 8. 무한 스크롤 구현 무한 스크롤을 구현하는 방식은 2가지가 있다. 1. 스크롤 이벤트 예전 방식이고 계속 이벤트를 발생시키기 때문에 브라우저에 부하가 걸릴 수 있다. 2. IntersectionObserver 인터페이스 요즘 방식이고 부하가 발생하지 않는다. 이 방식으로 구현하는 것을 추천! 동작 방식을 간단하게 설명하면 다음과 같다. 첫 페이지 리스트를 출력하고 리스트의 하단에 div를 만들어둔다. 여기서는 listEnd div. 브라우저에서는 현재 사용자가 보고 있는 화면을 감지할 수 있는데, IntersectionObserver 객체의 observe함수를 이용해서 특정 div를 관찰할 수 있다(observe). 스크롤을 내리다가 observe중인 div가 들어오면 이벤트를 발생시킨다. 이벤트를 발생할 함수(getGue.. 2023. 11. 13. 아이폰 모바일 웹 파일 첨부 내가 개발 중인 사이트에서 파일첨부하는 부분에 plupload라는 js모듈을 사용하고 있었는데, 아이폰에서만 저 모듈이 제대로 작동하지 않는 이슈가 있었다. 최신버전의 모듈을 받아서 크롬에서 모바일(아이폰) 모드로 해보니 잘 작동했다. 그래서 내가 개발하는 사이트에 있는 모듈을 최신 버전으로 업데이트를 하니, 파일 첨부가 잘 되었다. 특정 플랫폼에서 모듈이 작동하지 않을 때는 최신버전으로 바꿔서 해보자. 모듈이 버전업을 하면서 이런 이슈들이 수정되는 경우가 있기 때문이다. 모듈은 아래 사이트에서 받을 수 있다. plupload.min.js 파일로 안 되는 경우가 있다면 plupload.full.min.js 파일을 사용하도록 하자. https://www.plupload.com/ Plupload: Multi.. 2023. 8. 17. img onerror 두 번 처리하기 기획자로부터 특이한 요구사항이 들어왔다. 썸네일이 2개 있는데 1번 이미지가 없으면 2번 이미지를 보여주고, 그것도 없으면 기본 이미지를 보여주게 해 달라는 것이다. 보통 img 태그는 onerror 한 번으로 기본 이미지 처리만 한다. 하지만 위의 요구사항을 수용하려면 onerror를 두 번 처리해야 한다. 그래서 자문을 구해보니, 2번째 이미지의 존재여부를 별도 함수로 체크해서 그에 대한 에러 처리를 따로 해보라는 말을 들었다. - 구현 코드 - 구현 방식 1. img 태그에 1번째 이미지가 유효하지 않으면 onerror에 연결된 함수를 실행한다. 2. 연결된 함수에서 ajax에 $.get을 이용해서 2번째 이미지가 유효한지 판단한다. 3-1. 이미지가 유효하면 2번째 이미지를 img 태그 src속성.. 2023. 3. 9. 이전 1 다음 반응형
