3. Draggable & Resizable Layer 만들기 앞서 Draggable & Resizable 레이어 만들기 (1), Draggable & Resizable 레이어 만들기 (2) 에서 작성했던 코드를 기반으로,두 개의 코드를 합쳐보자. 우선 이벤트 리스너를 걸어준 두 개의 변수를 먼저 선언 한 후, 마우스 타겟 값을 대입 시켜 주기 위해 선언했던 변수를 선언한다. 생성 했던 드래그 함수와 이벤트 리스너를 추가 한…
2. Resizable Layer 만들기 클릭했을 때 레이어를 리사이즈 할 포인트를 변수로 먼저 선언 한 후,최초 X축의 위치, 최초 Y축의 위치, 리사이즈 전 최초 요소의 넓이, 리사이즈 전 최초 요소의 높이도 변수로 선언. Draggable 레이어 함수 생성했을 때와 동일하게,마우스를 누르는 순간 마우스의 위치 값을 변수에 대입해주고, resize할 레이어 요소의 넓이 값과 높이 값도 변수에 대입한다. 마우스를…
실무에서 디자인이나 기능 수정을 위해서 CSS나 JS를 수정 후 서버에 반영 했을 때,새로고침 및 강제 새로고침을 실행해도 브라우저가 가지고 있는 캐시로 인해 적용한 수정사항이 제대로 반영되어 보이지 않을 때가 많다. HTML 메타태그에 아래의 no-cache 코드를 추가해주면 해당 페이지가 캐시를 생성하지 않도록 설정해준다. Cache-Control의 속성에는 3가지의 값이 존재한다.no-cache는 캐시는 저장하지만, 매번 서버에 재검증을 요청하여 사용하는 속성이며,no-store는…
1. Draggable Layer 만들기 먼저 레이어를 drag를 할 레이어에 특정 아이디 값을 선언하여 필요한 변수를 먼저 선언하고,dragging 이벤트를 위한 변수와 x축과 y축의 좌표를 대입할 변수를 선언해준다.기본 변수 선언이 끝난 후, 마우스가 클릭 되었을 때, 마우스가 클릭 된 채 움직이고 있을 때, 그리고 마우스 클릭이 해제 되었을 때 일어날 이벤트 함수를 작성한다. 마우스를 누르는 순간 마우스의…
jQuery QueryBuilder는 Bootstrap의 많은 스타일을 참조에서 활용하고 있는데.. 그 테마 모양이 이렇다. 현재 프로젝트에서는 select input을 jQuery Select2 라이브러리를 커스터마이징하여 사용 하고 있는 중이라 쿼리빌더에도 select input에 select2 라이브러리를 적용해야만 했다. 가장 먼저 select2 라이브러리 활용을 위해 쿼리빌더에 적용방법을 구글에서 검색을 해보니, 쿼리빌더를 추가할 때에, plugins 선언으로 간단히 적용 가능하다는 설명이 있어 해보았지만, 제한적으로 가장…